反应：如何将道具从孩子传递给父母到另一个孩子？

小编典典

反应：如何将道具从孩子传递给父母到另一个孩子？

reactjs

我在这里有一个简单的设置：

我有一个父组件，该父组件有2个子组件。在第一个子组件中：用户更改输入的值。然后，该更改的值将是我想要从该孩子传递给父对象的道具，以便可以将其传递给与同一父组件相连的另一个孩子。

Main (parent component)___|
                          |_Child 1
                          |_Child 2

当前设置的这个，请查看

从用户输入到UI更改的流程：1.在“ Child
1”中：调整一个滑块，将onChange值传递给父组件；2.将此属性（新的滑块值）传递给Parent组件，以便“ Child
2”组件可以使用它；3.然后，该道具，即valueOfUserInput（新的滑块值）将在有关样式“ Child 2”组件元素的if /
else语句中使用。

我看过与我的问题相似的解决方案和教程，但是对我来说意义不大。我整天都在闲逛，穿插着开会。

任何帮助或建议将是惊人的。谢谢大家对这个React noob的耐心配合。

阅读 360

2020-07-22

共1个答案

小编典典

当您希望2个孩子交流或共享一些数据时，在React中实现此目的的方法是 提升状态
（source）。

这意味着孩子使用的状态应该居住在父母中。然后父母将状态传给孩子。

要从子项中的操作更新状态，通常的模式是从父项中传递一个函数，该函数在子项中执行该操作时会被调用。

这是一个示例，它可以满足您的要求：

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { valueOfUserInput: '' };
  }

  handleUserInputChange = event => {
    this.setState({
      valueOfUserInput: event.target.value,
    });
  };

  render() {
    const { valueOfUserInput } = this.state;
    return (
      <div>
        <Child1 valueOfUserInput={valueOfUserInput} onUserInputChange={this.handleUserInputChange} />
        <Child2 valueOfUserInput={valueOfUserInput} />
      </div>
    );
  }
}

class Child1 extends React.Component {
  render() {
    const { valueOfUserInput, onUserInputChange } = this.props;
    return <input type="text" value={valueOfUserInput} onChange={onUserInputChange} />;
  }
}

class Child2 extends React.Component {
  render() {
    const { valueOfUserInput } = this.props;
    return (
      <div>
        {valueOfUserInput}
      </div>
    );
  }
}

2020-07-22