0

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

我希望在 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')
);
4

2 回答 2

0

在父组件中，您将handleResetChange prop 传递给SelectListReset但正在执行this.props.onSelectListChange. 函数句柄 click 也应命名为 eghandleClick而不是handleChange.

于 2019-01-29T15:10:41.847 回答
0

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

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
于 2019-01-29T15:15:19.170 回答