//自己创建react表单的双向数据绑定
class TwoBind extends React.Component {
constructor() {
super();
this.state = {
text: '我是自己创建的双向数据绑定'
}
}
render() {
let {text} = this.state
return <div>
<input style={{width: '300px'}} value={text} onChange={this.changeText}/><br />
显示：{text}
</div>;
}
changeText = (e) => {
this.setState({text: e.target.value})
}
}
ReactDOM.render(<TwoBind/>, document.getElementById("root"))
注意：在使用input并且只提供了value值的时候，React会抛出警告，并将元素设置为只读。如是应添加readOnly属性消除警告，或者是添加onChange方法变成双向绑定。
网友评论