手动设置react的input双向绑定

2021-02-02  本文已影响0人  转移到CSDN名字丹丹的小跟班
//自己创建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方法变成双向绑定。

上一篇 下一篇

猜你喜欢

热点阅读