React 受控组件

//受控组件
//React组件状态的地方实在state中,input表单元素也有自己的状态实在value中,
//React将state与表单元素的值(value)绑定在一起,由state的值控制表单元素的值,从而保证单一数据源特性。
/**
 * 实现步骤
 * 1.在组件的state中声明一个组件的状态数据
 * 2.将state状态数据设置为input标签元素的value属性的值
 * 3.为input标签元素绑定onChange事件
 * 4.在事件处理程序中，通过事件对象e获取到当前文本框的值
 * 5.调用setState方法,将文本框的值设置为状态数据
 * 
 * 
 * 
 * 
 */

import React from "react"

class Test extends React.Component {
  //1.在组件的state中声明一个组件的状态数据
  state = {
    message: 'this is message',
  }
  //回调函数
  changeState = (e) => {
    //4.在事件处理程序中，通过事件对象e获取到当前文本框的值
    //交给state.message的值
    this.setState({
      message: e.target.value
    })
  }

  render () {
    return (
      <div>
        {/*  2.将state状态数据设置为input标签元素的value属性的值 
         3.为input标签元素绑定onChange事件  */}
        <input type="text" value={this.state.message}
          onChange={this.changeState} />
      </div>
    )
  }
}


function App () {
  return (
    <div className="App">
      <Test />
    </div>
  )
}

export default App