将道具/状态传递回React JS中的父组件

Question

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

我要在用户界面中执行的操作是用户可以从所需的选择列表中选择任何选项，然后按按钮将列表重置为“选择”

我将父组件作为事实的唯一来源-所有更新后的状态都传递回父组件，实际上，在具有以下代码的一个文件的上下文中，这种工作非常有效；

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

但是我实际上想做的是将“重置”按钮移到它自己的文件中，这就是我试图将props / state传递回父对象的地方。

所以render方法实际上看起来像这样

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组件的代码，但是我遇到的问题是，现在这些值作为道具发送给它了，应该是不可变的，因此无法更新？

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

Answer 1

如果更改了父级中的相关状态，则从父级收到的道具也会更改。 这没有问题，所有重新渲染都由React处理。 您可以根据需要将道具传递至任意多个级别。