频道导航

reactjs – React：如何将道具从孩子传递给父母到另一个孩子？

2020-06-30 React 前端之家

前端之家收集整理的这篇文章主要介绍了reactjs – React：如何将道具从孩子传递给父母到另一个孩子？，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

我在这里设置简单：

我有一个父组件,它有2个子组件附加到此父组件.在第一个子组件中：用户更改输入的值.然后,该更改的值将是我想从此子项传递给父项的prop,以便它可以传递给附加到同一父组件的另一个子项.

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

this the set up currently,please view

从用户输入到UI更改的流程：1.在“子1”中：调整滑块,onChange传递值到父组件; 2.将此prop(新滑块值)传递给Parent组件,以便它可用于“Child 2”组件; 3.那个prop,valueOfUserInput(新的滑块值)将用于关于样式化“Child 2”组件元素的if / else语句中.

我见过类似于我的问题的解决方案和教程,但它们对我来说并不合适.我一整天都在乱砍,穿插会议.

任何帮助或建议都会很棒.谢谢大家对这个React noob的耐心等待.

@H_502_14@

当您希望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>
    );
  }
}