react实现关于文本框的双向绑定

• 在 Vue 中，有 v-model 指令来实现双向数据绑定，但是，在 React 中， 根本没有指令的概念，因此React 默认也不支持 双向数据绑定 
•  React 只支持，把数据从 state 上传输到 页面，但是，无法自动实现数据从 页面 传输到 state 中 进行保存，也就是，React 不支持数据的自动逆向传输， 只是实现了数据的单向绑定 
•  注意：如果为 表单元素，提供了 value 属性绑定，那么，必须同时为 表单元素 绑定 readOnly, 或者提供要给 onChange 事件 。
• 如果想实现根据文本框输入的内容来改变state中的数据，然后重新传输到页面上，实现数据的双向绑定，下面代码可以实现。

 

import React from 'react'

export default class BindThis extends React.Component{
  constructor(props){
    super(props)
    this.state={
      msg:'这是默认的msg'
    }

  }

  render(){
    return <div>

      <h3>{this.state.msg}</h3>
      {/* 如果提供了readOnly，表示这个元素只读的不能被修改  */}
      {/* 如果提供了onChange 表示，这个元素的值可以被修改，但是，要自己定义修改的逻辑  */}
      <input t