react --- 父子组件间通信

父组件将数据或函数传给子组件的 props，以改变子组件。

子组件通过调用 props 中的回调函数改变父组件的状态。需要注意的是，父子组件不要漏掉 bind，否则会报错 this.setState is undefined

父组件向子组件传递数据

父组件

class Father extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
		childState: "childState",
	}
  }

  render() {
	return (
   		<Child childState={this.state.childState}/>
    )
  }
}

export default Father

子组件

class Child extends React.Component {
  constructor(props) {
    super(props)
 }

  render() {
	return (
   		<div>
			<input type="text" value={this.props.childState}/>
		</div>
    )
  }
}

export default Child

子组件改变父组件的状态

父组件

class Father extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
		myState: "myState",
	}
	this.setMyState = this.setMyState.bind(this)
  }

  setMyState(state) {
	this.setState({myState: state})
  }
 
  render() {
	return (
   		<Child setFatherState={this.setMyState}/>
   		<input type="text" value={this.state.myState}/>
    )
  }
}

export default Father

子组件

class Child extends React.Component {
  constructor(props) {
    super(props)
    this.changeFatherState = this.changeFatherState.bind(this)
  }

  changeFatherState() {
    return this.props.setFatherState("fatherState")
  }

  render() {
	return (
   		<div>
			<button title="改变父组件的状态"  onClick={this.setFatherState}>
		</div>
    )
  }
}

export default Child