从父组件更新子状态

Question

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

 Parent
| Child1
| Child2

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

我怎样才能做到这一点？

原文由 Mit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 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>
    )
  }
}

原文由 kurumkan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以在你的子组件中有一个函数，它根据从父组件发送的值更新状态。您可以使用 refs 从父组件访问子组件的功能 —

例子

家长：

 class Parent extends React.Component {
     funcUpdateChild1 = () => {
          this.child1.updateState('value here');
     }
     render() {
          return (
              <Child1 ref={(ip) => {this.child1 = ip}} />
              <Child2 ref={(ip) => {this.child2 = ip}} />
         )
     }
}

孩子1

 class Child1 extends React.Component {
     updateState = (value) => {
         //use the value to set state here
     }
     render() {
          return (
              //child1 contents here
         )
     }
}

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 3.0 许可协议