在 React JS 中使用多个组件从父级传递和更新 prop / state 值答案

【问题标题】：Passing and updating prop / state values from parent with multiple components in React JS在 React JS 中使用多个组件从父级传递和更新 prop / state 值
【发布时间】：2019-01-29 15:05:55
【问题描述】：

我有两个组件，一个组件中有多个选项的选择列表，另一个组件中有一个按钮。

我希望在 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;
    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.onSelectListChange(e.target.value);
  }

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

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

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

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

  render() {
    return (
      <div>
        <SelectList
          onSelectListChange={this.handleSelectedListChange}
          selectedValue={this.handleSelectedListChange}
        />
        <SelectListReset 
          handleResetChange={this.handleSelectedListChange}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

【问题讨论】：

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

【解决方案1】：

在父组件中，您将handleResetChange 属性传递给SelectListReset，但正在执行this.props.onSelectListChange。函数句柄点击也应命名为例如handleClick 而不是 handleChange。

【讨论】：

【解决方案2】：

您的 父组件 出错了，您将 selectedValue 传递给 SelectList 的方式以及 State 的方式> 已设置，我已编辑代码请检查

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

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

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

  render() {
    return (
      <div>
        <SelectList
          onSelectListChange={this.handleSelectedListChange}
          selectedValue={this.state.selectedValue}
        />
        <SelectListReset 
          handleResetChange={this.handleSelectedListChange}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);
javascript

【讨论】：