在 React JS 中将 props / state 传递回父组件答案

【问题标题】：Passing props / state back to parent component in React JS在 React JS 中将 props / state 传递回父组件
【发布时间】：2019-06-23 15:42:07
【问题描述】：

我有两个组件，一个包含多个选项的选择列表和一个按钮组件

我想在 UI 中做的是，用户可以从他们想要的选择列表中选择任何选项，然后按下按钮将列表重置为“选择”

我将父组件作为唯一的事实来源 - 所有更新的状态都传递回父组件，实际上我已经在使用以下代码的一个文件的上下文中很好地工作了；

class SelectList extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onSelectListChange(e.target.value);
  }

  render() {
    const selectedValue = this.props.selectedValue;
    log.debug('SelectListValue(): ', this.props.selectedValue);

    return (
      <select value={selectedValue} onChange={this.handleChange}>
        <option value='One'>One</option>
        <option value='select'>select</option>
        <option value='Three'>Three</option>
        <option value='Four'>Four</option>
        <option value='Five'>Five</option>
      </select>
    );
  }
}

class SelectListReset extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onResetChange('select');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleChange}>Reset list to select</button>
      </div>
    );
  }
}

class Page extends Component {
  constructor(props) {
    super(props);
    this.state={
      selectedValue: 'select'
    }
    this.handleSelectedListChange = this.handleSelectedListChange.bind(this);
    this.handleResetChange = this.handleResetChange.bind(this);
  }

  handleSelectedListChange(selectedValue) {
    this.setState({selectedValue});
  }

  handleResetChange() {
    this.setState({selectedValue: 'select'});
  }

  render() {
    log.debug('render(): ', this.props);
    log.debug('ParentListValue(): ', this.state.selectedValue);
    return (
    <div className="content-area">
        <div className="container">
            <h1>{LANGUAGES_CONTROLLER.format(this.props.languages, 'TitleSettings')}</h1>

            <div>
              <SelectList
                onSelectListChange={this.handleSelectedListChange}
                selectedValue={this.state.selectedValue}
              />

              <SelectListReset 
                onResetChange={this.handleResetChange}
                selectedValue={this.state.selectedValue}
              />

            </div>

        </div>
    </div>
    );
}

但我真正喜欢做的是将重置按钮移动到它自己的文件中，这就是我试图将道具/状态传递回父级的地方。

所以渲染方法实际上应该是这样的

render() {
  log.debug('render(): ', this.props);
  log.debug('ParentListValue(): ', this.state.selectedValue);
  return (
    <div className="content-area">
      <div className="container">
        <h1>{LANGUAGES_CONTROLLER.format(this.props.languages, 'TitleSettings')}</h1>

        <div>
          <SelectList
            onSelectListChange={this.handleSelectedListChange}
            selectedValue={this.state.selectedValue}
          />

          <TestComponent 
            onResetChange={this.handleResetChange}
            selectedValue={this.state.selectedValue}
          />

        </div>

      </div>
    </div>
  );
}

我导入 TestComponent 然后在 TestComponent 内部是我的 SelectListReset 组件的代码，但我遇到的问题是现在这些值作为道具发送给它，这些道具应该是不可变的，所以不能更新了吗？

这就是我的理解停止的地方..如果有人能指出我正确的方向，我将非常感激！

【问题讨论】：

有什么问题？将代码移动到新文件如何影响道具。重置按钮逻辑不会修改任何选定的值。那么为什么将其作为道具发送给它呢？ .它只使用onResetChange方法。

标签： reactjs react-props react-state-management react-state

【解决方案1】：

如果父项中的相关状态发生更改，则从父项接收的道具将发生更改。这没有问题，所有的重新渲染都由 React 处理。您可以将道具向下传递任意多个级别。

【讨论】：