React响应式设计及原理

一、 实例演示

对input输入框实现双向数据绑定，当输入数据时，同时改变和显示input中的数据

class TodoList extends Component {
//1.初始化时定义数据
constructor(props) {
super(props);
this.state = {
inputValue: '',
list: []
}
}
render() {
return (
<Fragment>
<input
value={this.state.inputValue} /* 绑定当前组件中的数据*/
onChange={this.handleInputChange.bind(this)}
/* 当输入框内容改变时，触发函数改变组件中的数据*/
/>
</Fragment>
)
}
handleInputChange(e) {
/* 通过setState方法才可以改变组件中的数据*/
this.setState({
inputValue: e.target.value
})
}
}