React中的双向绑定简易实现

实现效果如下：

简易代码如下

class App extends Component{
  constructor(){
    super()
    this.state={
      xing:'',
      ming:''
    }
  }
  //方法
  handleInputChange=(e)=>{//这里如果不用箭头函数的话，this就不指向组件了，需要注意
    console.log(e.target);   //表示是 当前的dom对象 input
    console.log(e.target.name);  //xing
    console.log(e.target.value); //ming
    this.setState({
      [e.target.name]:e.target.value    //前面是this.setState这个对象中的key  数组表示的是这个key一个变量 
    })
  }

  //render
  render(){
    const {xing,ming}=this.state  //解构赋值 不使用也可以，不过后续使用的前缀要加this.state
    return (
      <div>
        {/* 姓 */}
        <label>
          <span>姓：</span>
          <input type="text" name="xing" value={xing} onChange={this.handleInputChange}></input>
        </label>
        {/* 名 */}
        <label>
          <span>名：</span>
          <input type="text" name="ming" value={ming} onChange={this.handleInputChange}></input>
        </label>
    <p>欢迎：{xing}{ming}</p>
      </div>
    )
  }
}
ReactDOM.render(
  <App></App>,
  document.querySelector("#root")
)

标签：xing,target,render,绑定,ming,React,state,双向,console
来源： https://blog.csdn.net/xunfengZ/article/details/110941119