对于 Vue 而言，它本身内置了v-model这样的语法糖，可以帮我们进行双向绑定，但是 React 在很大程度上需要自己来进行设置。

  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  4. class TxtInput extends React.Component {
  5.   constructor(props){
  6.     super(props)    // super() 类似于调用父类(React.Component)的构造函数
  7.     this.state = {
  8.       txtValue: ""
  9.     }
  10.   }
  12.   handleChange(e){
  13.     /* 
  14.        将文本框 value 传给状态对象的 txtValue 属性中 
  15.          value 在 `e.target.value` 属性中
  16.     */
  17.     this.setState({
  18.       txtValue: e.target.value
  19.     })
  20.   }
  22.   render(){
  23.     return (
  24.       <div className="input-box">
  25.           <input 
  26.           value={this.state.txtValue}        /* 将 input 值和 txtValue 属性绑定，实现单向传输数据 */
  27.           onChange={ (e)=> this.handleChange(e) }  /* 更新 txtValue 的值 */
  28.         >
  29.       </div>
  30.     )
  31.   }
  32. }
  34. ReactDOM.render(<TxtInput/>, document.getElementById("root"))

小结

在整个过程中，我们并没有通过 this.state.txtValue 的值和 input标签中的 value 属性进行绑定，而是通过：

  • value={this.state.txtValue}来实现 value 动态与 txtValue 值相同
  • 通过 onChange 事件来监听value的变化，利用handleChange()这个函数，来对状态中的txtValue进行更新。