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

但是我实际上想做的是将重置按钮移到它自己的文件中，这就是我试图将道具/状态传递回父项的原因。

因此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处理。您可以根据需要将道具传递至任意多个级别。

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

1 个答案: