初识React(day8)

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

上一篇文章中我们介绍React组件中的state和setState的基本使用以及事件绑定中的this指向问题，接下来将会介绍React中事件绑定this指向问题的两种解决方法以及受控组件及其使用步骤

1. Function.prototype.bind()

利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起，示例代码如下所示：

class Hello extends React.Component
{
constructor(){
super (
this.onIncrement this.onIncrement.bind(this)
}
//...省略
onIncrement
render ()
return
<button onclick={this.onIncrement}></button
}
}

2. class的实例方法

• 利用箭头函数形式的class实例方法
• 注意：该语法是实验性语法，但是，由于babe的存在可以直接使用
• 示例代码如下所示：

class Hello extends React.Component
onIncrement =()=>
this.setstate({…})
render ()
return
<button onclick={this.onIncrement)></button>
)

3. 总结：

• 推荐使用class的实例方法，代码如下所示：

class Hello extends React.Component
onIncrement =()=>
this.setstate({...}）
}
}

• 箭头函数的方法，代码如下所示：

<button onClick={()=>this.onIncrement}>

• bind方法，代码如下所示：

constructor(){
super()
this.onIncrement this.onIncrement.bind (this)
}

4. 受控组件

• HTML中的表单元素是可输入的，也就是有自己的可变状态
• 而，React中可变状态通常保存在state中，并且只能通过setState0方法来修改
• React将state与表单元素值value绑定到一起，由state的值来控制表单元素的值
• 受控组件：其值受到React控制的表单元素
• 例如：

<input type="text"value={this.state.txt}/>

• 使用步骤： 1.在state中添加一个状态，作为表单元素的value值（控制表单元素值的来源） 2.给表单元素绑定change事件，将表单元素的值设置为state的值（控制表单元素值的变化）