React学习——Day9

一、在React中为按钮绑定点击事件

1. 事件的名称都是React提供的，因此名称的首字母必须大写：onClick、onMouseOver。事件名是小驼峰命名。
2. 为事件提供的处理函数，必须是如下格式：

onClick = {function}

3. 用的最多的事件绑定形式为：

<button onClick={ () => this.show('传参') }>按钮</button>
// 事件的处理函数，需要定义为一个箭头函数，然后赋值给函数名称
show = (arg1) => {
	console.log("show方法" + arg1);
}

以下代码演示了在React中为按钮绑定点击事件：

class BindEvent extends React.Component{
    constructor(){
        super();
        this.state = {}
    }
    render(){
        return <div>
            <button onClick={ () => {this.show("🐖")} }>按钮</button>
        </div>
    }
    show = (arg1) => {
            console.log("Hello, " + arg1);
    }
}

事件处理函数都写成箭头函数的形式能够保证大多数情况下事件处理程序能够按照我们预想的方式执行（this指向组件类）。

二、使用this.setState修改state上的数据

在React中，如果想要修改state中的数据，推荐使用this.setState({})
看下面的代码：

class BindEvent extends React.Component{
    constructor(){
        super();
        this.state = {
            msg: "王者荣耀"
        }
    }
    render(){
        return <div>
            <button onClick={ () => {this.show()} }>按钮</button>
            <h3>{this.state.msg}</h3>
        </div>
    }
    show = () => {
            this.setState({
                msg: "英雄杀"
            });
    }
}

点击按钮，页面上的值会从“王者荣耀”变为“英雄杀”，但是如果在show方法中，我们直接使用this.state修改msg的值，当我们点击按钮时，虽然msg的值被改变了，但是页面上依然显示“王者荣耀”。

三、this.setState的两个注意点

• setState只会把对应的state状态更新，而不会覆盖其它的state状态。
• this.setState方法的执行是异步的，如果我们在调用完this.setState之后想立即拿到最新的state值，需要使用this.setState({}, callback)。

四、React中绑定文本框与state中的值

注意：如果我们只是把文本框的value属性绑定到了state状态，但是，如果不提供onChange处理函数的话，得到的文本框将会是一个只读的文本框。

单向绑定

以下代码演示了上述过程：

class BindInput extends React.Component{
    constructor(){
        super();
        this.state = {
            msg: "OPPO"
        }
    }
    render(){
        return <div>
            <input type="text" style={{width: "100%"}} value={this.state.msg} onChange={(e) => {this.textChanged(e)}}/>
            <h3>{this.state.msg}</h3>
        </div>
    }
    textChanged = (e) => {
            this.setState({
                msg: e.target.value
            })
    }
}

以上是通过事件对象e来获取对文本框的引用；在React中还可以使用ref来获取对DOM元素的引用：React为页面上的元素提供了ref属性，如果要获取元素的引用，可以使用this.refs.引用名称。
这里大部分人可能会想：获取某个DOM元素还不简单？直接用document.getElementById()等一系列方法不行吗？行，但是React的诞生就是为了减少DOM操作，它与jQuery算是一生之敌，毕竟React就是为了取代jQuery的。
效果如下:

<h3>标签中的值实时反映了state中的值，可以看到以上实现了文本框中的值与state中值的双向绑定。