react实现双向绑定

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标签的值也跟着发生变化!