上文已提到:
在 Vue 中,默认提供了v-model
指令,可以很方便的实现 数据的双向绑定
;但是,在 React 中,默认只是单向数据流
,也就是 只能把 state 上的数据绑定到 页面,无法把 页面中数据的变化,自动同步回 state ; 如果需要把 页面上数据的变化,保存到 state,则需要程序员手动监听onChange
事件,拿到最新的数据,手动调用this.setState({ })
更改回去;案例:绑定文本框与state中的值(单向数据流)两种方式
方案1: 通过 事件参数 e 来获取方案2: 通过 ref 来获取
export default class BindEvent extends React.Component {constructor() {super();this.state = {msg: '你看,城南的花都开了,该你熬的也都熬过来了,所也别不高兴了'}}render() {return <div><h3>{this.state.msg}</h3><input className="form-control" type="text" value={this.state.msg} readOnly/><h3>获取input框中的值</h3><br/><h4>方案1: 通过 事件参数 e 来获取</h4><input className="form-control" type="text" value={this.state.msg} onChange={(e) => this.txtChanged(e)}/><h4>方案2: 通过 ref 来获取</h4><input className="form-control" type="text" value={this.state.msg} ref="txt" onChange={() => this._txtChanged()}/></div>}
//方案1: 通过 事件参数 e 来获取txtChanged = (e) => {const newVal = e.target.value;this.setState({msg: newVal})};
//方案2: 通过 ref 来获取_txtChanged = () => {const newVal = this.refs.txt.value;this.setState({msg: newVal})};
}
更多推荐
数据流,绑定,文本框,state
发布评论