React受控组件及组件通讯

受控组件

• 受控组件通常指的是表单，因为表单是可输入的，必须有对应的状态与之绑定
• React 将 state与表单的 value值绑定到一起
• 给表单元素绑定change事件，将表单元素的值设置为state的值，接收表单值变化

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
	// 1. state 中设置数据
  state={
    name: '张三丰'
  }
    // 事件函数中调用 setState 将数据进行保存
	// 参数: e 是事件对象
	//  e.target 中保存了标签的 DOM 对象
	//  e.target.value 保存了input中的value
	//  e.target.name 保存了input的name值
  change = (e)=>{
    this.setState({
      name: e.target.value
    })
  }
  render(){
    return (
      <div>
      // 2. 表单域中将 state中的数据与value绑定
	  // 3. 文本框每次内容发生变化都会触发 change 事件，可以在事件函数中将文本框中的最新数据更新到 state 中
        <input value={this.state.name} onChange={this.change}/>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.querySelector('#app'))

当有多个域需要绑定数据时，可以定义一个函数统一处理
核心： e.targe