从父组件更新孩子的状态

Question

假设我的父组件有两个子组件：

Parent
| Child1
| Child2

我从Child2获得输入，并将其传递给Parent组件（直到现在，我知道该怎么做）。但是然后我需要将该输入传递给Child1以更新其状态。

我怎样才能做到这一点？

Answer 1

希望您能得到主要想法-在Parent组件中创建一个函数，该函数将更改传递给Child1的值。ReactJS：为什么将组件的初始状态传递为prop是反模式？

class Parent extends Component {
  constructor(props){
    super(props);
    this.state = {
      value: ""
    }
  }
  changeValue(value){
    this.setState({value});
  }
  render(){
    return (
      <div>
          <Child1 value={this.state.value}/>
          <Child2 changeValue={changeValue}/>
      </div>
    )
  }
}


class Child2 extends Component {
  constructor(props) {
    super(props);
    this.state={
      input: ""
    }
  }
  handleChange(e){
    var {value} = e.target;
    this.setState({
      input: value
    },() => this.props.changeValue(value));
  }
  render(){
    return (
      <div>
          <input value={this.state.input} onChange={this.handleChange}/>
      </div>
    )
  }
}



class Child1 extends Component {

  constructor(props) {
    super(props);
    this.state={value:''}
  }
  componentWillReceiveProps(nextProps) {
    this.setState({value: nextProps.value})
  }


  render(){
    return (
      <div>
          {this.props.value}
      </div>
    )
  }
}