事件

什么是事件

React 的事件处理和 DOM 元素类似。但是语法上是不同的:

React 事件绑定属性时采用驼峰命名法，而不是小写。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

事件的写法

HTML中的写法

<button onClick="addAge()">点我啊</button>

JSX中的写法

<button onClick={this.addAge}>点我啊</button>

我们在处理一些简单逻辑的时候，可以直接写要处理的事情

<button onClick={console.log("hello world")}>点我涨一岁</button>

但这种方式在逻辑比较复杂的情况下会造成代码不够简洁，不能够一目了然的看清代码，所以一般拉出去写一个函数

class App extends Component{ addAge(){ console.log(123) } render(){ return (<div> <button onClick={this.addAge}>点我啊</button> </div>) }; }

this指向的问题

这里会牵扯到this指向的问题，比如说这段代码：

class App extends Component{ addAge(){ console.log(this) } render(){ return (<div> <button onClick={this.addAge}>点我啊</button> </div>) }; }

浏览器反馈 通常这里最简单的处理方法是将函数替换为箭头函数，如下所示：

class App extends Component{ addAge = ()=>{ console.log(this) } render(){ return (<div> <button onClick={this.addAge}>点我啊</button> </div>) }; }

浏览器反馈

state

state是什么

state——组件自身状态

state与props的区别是什么

state 的主要作用是用于组件保存、控制、修改 自己 的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 stateprops 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改state 和 props 都可以决定组件的外观和显示状态。通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state

从实例中来学习state的使用

需求：将该列表实现点击缩进，再次点击弹出这样一功能 该列表基本代码

// index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './app'; ReactDOM.render( <App />, document.getElementById('root') ); //================================================================== // app.js import React,{Component} from "react"; import FriendList from './FriendList'; class App extends Component{ render(){ return (<div> <FriendList /> </div>) }; } export default App; //================================================================== // FriendList .js import React,{Component} from "react"; import './FriendList.css'; import data from './data'; import Dl from './dl' export default class FriendList extends Component { render(){ return ( <div className="friend-list"> { Object.keys(data).map((item,index)=>{ return <Dl key={index} value={data[item]}/> }) } </div> ) } } //================================================================== // dl.js import React,{Component} from "react"; export default class Dl extends Component{ render() { let {title,list} = this.props.value return ( <dl className="friend-group"> <dt>{title}</dt> { list.map((item,index)=>{ return <dd key={index}>{item.name}</dd> }) } </dl> ) } } //==================================================================

首先我们我们的需求是点击实现列表的收缩，所以我们需要给dt加一个点击事件，然后通过这个事件的触发来控制一个变量，从而让该列表实现收缩功能

1. 给dt添加点击事件

<dt onClick={this.showHide}>{title}</dt>

2. 点击事件控制变量

constructor(props){ super(props); this.state = { showOrHide:true, } } showHide = ()=>{ this.setState(res => ({ showOrHide : !res.showOrHide })) }

注意点：

当我们需要修改this.state 里边的值的时候，我们需要使用setStatethis.setState这个方法里使用箭头函数时，我们的this.state必须写在constructor里边

3. 是用三目运算符从而达成通过变量控制列表收缩

render() { ... return ( ... { this.state.showOrHide ? list.map((item,index)=>{ return <dd key={index}>{item.name}</dd> }) : null } ... ) }