react没有提供类似于angular中[(ngModel)]和vue中v-mode的l双向绑定,最近在学习react,以下是我实现数据的双向绑定的方式
class TextChange extends React.Component {
constructor(props) {
super(props);
this.state = {
inputData: ''
}
}
textChange = (e) => {
this.setState({
inputData: e.target.value
})
}
render() {
return (
<div className="textChange">
<div>
<input value={this.state.inputData} onChange = {this.textChange}/>
</div>
<div>
<span>{this.state.inputData}</span>
</div>
</div>
)
}
}
按照以上方法就可以实现数据的双向绑定了,这里主要运用了 onChange和setState,通过更新状态使得输入框的值发送改变的时候,span标签的值也跟着发生变化!