React的事件

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

HTML中的写法
<button onClick="fn()">点我啊</button>
JSX中的写法
<button onClick={this.fn}>点我啊</button>

我们在处理一些简单逻辑的时候，可以直接写要处理的事情
<button onClick={console.log(“hello world”)}>长一岁

state 和 setState
setState(updater, [callback])
updater: 更新数据 FUNCTION/OBJECT
callback: 更新成功后的回调 FUNCTION
异步:react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能
State 的更新是一个浅合并的过程。

当调用setState修改组件状态时，只需要传入发生改变的State，而不是组件完整的State，因为组件State的更新是一个浅合并

类组件：
1.组件类必须继承 React/Component
2.组件类必须有 render 方法
3.render 方法的 return 后 定义组件内容

//类式组件中，定义constructor，一定需要接受props。调用super

constructor(props) {
    super(props)
    this.state = {
        nub: 20,
        name:"叮当猫"
    }
}

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

fn() {
        console.log(this)
    }
    render() {
        return (
            <div>
                <button onClick={this.fn}>长一岁</button>
            </div>
        )
    }

浏览器反馈

通常这里最简单的处理方法是将函数替换为箭头函数

fn = ()=>{

    console.log(this)
}
render() {
    return (
        <div>
            <button onClick={this.fn}>长一岁</button>
        </div>
    )
}

浏览器反馈

点击事件

在dl.js中先在state中写一个变量isOpen 通过判断是true还是false来添加class名来达到点击显示点击隐藏

state = {
        isOpen: false
}

<div className={"friend-group " + (isOpen?"expanded" : "")}>

在dt中创建一个onClick点击事件

onClick={
     () => {
      	this.setState({
            isOpen: !isOpen
         })
      }
}

组件间通信
在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props - React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。

父级向子级通信把数据添加子组件的属性中，然后子组件中从props属性中，获取父级传递过来的数据
子级向父级通信在父级中定义相关的数据操作方法(或其他回调), 把该方法传递给子级，在子级中调用该方法父级传递消

父子传参
父传子

//父传子 父级
    state = {
        name:"鸡胸肉",
        hobby:"打豆豆"
}
changValue = {this.changValue}
// 父级接收的内容
    changValue = (newName)=>{
        this.setState({name:newName})
}
//子级   父传子出来的内容
        console.log(this.props)
        let { changValue } = this.props
//子级传出的内容
<button onClick={
     () => {
        changValue("酱牛肉")
     }
}>点击</button>