2, JSX 存在的问题
因为 JSX 中 DOM 元素也是对象，给元素的属性赋值实际是给 DOM 元素对象的属性赋值，见下：
const element = (
<button onClick={this.handleClick}>click me</button>
);
等同于
const element = {
type: 'button',
props: {
onClick: this.handleClick,
children: 'click me',
},
};
这实际就是 将函数体赋值给一个对象的属性，函数执行时 this 和定义时指向不同 的场景，和原生语法相同的是 this 指向发生了改变，不同的是原生 JS 中不管怎样， this 总归是有个指向的，而 JSX 直接 undefined 。
所以说不绑定 this 报 undefined 的错不能全怪 JS 原生语法。
3. 双向数据绑定
通过 state 传递数据加上事件处理程序便能实现数据的双向绑定，其背后的思想是（以 input 为例）：初始化时将 state 中预定义的 state a 赋值给 input，当 input 的 value 发生改变时，触发事件处理程序，将改变后的 value 赋值给状态 a ，React 监测到 state 改变时重新调用 render() 方法，即重新渲染组件，达到双向绑定的目的。
class App extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: "test",
};
this.changeInput = this.changeInput.bind(this);
}
changeInput(e) {
// 将改变后的 input 值赋值给 inputValue，通过事件对象 $event.target.value 实现
this.setState({
inputValue: e.target.value
});
}
render() {
// input 改变时触发 changeInput
return (
<div className="App">
<input value={this.state.inputValue} onChange={this.changeInput} />
<p>{this.state.inputValue}</p>
</div>
);
}
}
这里用到了事件对象，React 的事件对象和 JS 原生事件对象保持一致。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。