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

Answer 1

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

Answer 2

您在父级组件中出了错，将selectedValue传递给 SelectList 的方式以及状态< / strong>已设置，我已编辑代码，请检查

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

通过React JS中具有多个组件的父级传递和更新prop / state值

2 个答案: