从React.js的另一个下拉菜单中选择一个选项时如何重置下拉菜单值

Question

如果用户从3下拉列表中选择数字numbers，这将使names下拉列表被禁用。 我想在选择选项3时将名称下拉列表重置为“选择名称”。

const DropDown = ({ selectedValue, disabled, options, onChange }) => {
  return (
    <select onChange={onChange} disabled={disabled}>
      {
        options.map(o => <option value={o} selected={o == selectedValue}>{o}</option>)
      }
    </select>
  );
}


class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      numbers: [1, 2, 3, 4, 5], // 3 should disable the second dropdown and reset
      names: ['john', 'jane', 'eric'],
      selectedNumber: '',
      selectedName: ''
    }

    this.onNumbersChange = this.onNumbersChange.bind(this);
    this.onNamesChange = this.onNamesChange.bind(this);
  }

  onNumbersChange(e) {
    this.setState({ selectedNumber: e.target.value });
  }

  onNamesChange(e) {
    this.setState({ selectedName: e.target.value });
  }

  render() {
    const { numbers, names, selectedNumber, selectedName } = this.state;
    return (
      <div>
        <DropDown
          options={numbers}
          selectedValue={selectedNumber}
          onChange={this.onNumbersChange}

        />
        <DropDown
          options={names}
          selectedValue={selectedName}
          onChange={this.onNamesChange}
          disabled={selectedNumber == 3} // this will be disabled if selected value of the first dropdown is 3
        />
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

我的下拉菜单使用Redux表单字段。

<Field name="Name" 
 component={renderSelect} 
 label="" 
 disabled options={options} 
 returnValue={"id"} 
 displayText={"name"} 
/> 

所以这是我的下拉菜单。我无法重置其值

Answer 1

您需要进行2次更改

1. 在onNumbersChange函数中，检查e.target.value是否等于3。如果是，则将selectedValue的状态更新为'select name'
2. 在DropDown组件中，如果selectedValue道具等于'select name'，则添加一个值为'select name'的附加选项，并在其上添加selected属性。

const DropDown = ({ selectedValue, disabled, options, onChange }) => {
  return (
    <select onChange={onChange} disabled={disabled}>
      { 
         selectedValue === 'select name'
           ? <option value={selectedValue} selected>{ selectedValue }</option>
           : null
      }
      {
        options.map(o => <option value={o} selected={o == selectedValue}>{o}</option>)
      }
    </select>
  );
}


class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      numbers: [1, 2, 3, 4, 5], // 3 should disable the second dropdown and reset
      names: ['john', 'jane', 'eric'],
      selectedNumber: '',
      selectedName: ''
    }

    this.onNumbersChange = this.onNumbersChange.bind(this);
    this.onNamesChange = this.onNamesChange.bind(this);
  }

  onNumbersChange(e) {
    if (e.target.value == 3) {
       this.setState({ selectedName: 'select name' });
    }
    this.setState({ selectedNumber: e.target.value });
  }

  onNamesChange(e) {
    this.setState({ selectedName: e.target.value });
  }

  render() {
    const { numbers, names, selectedNumber, selectedName } = this.state;
    return (
      <div>
        <DropDown
          options={numbers}
          selectedValue={selectedNumber}
          onChange={this.onNumbersChange}

        />
        <DropDown
          options={names}
          selectedValue={selectedName}
          onChange={this.onNamesChange}
          disabled={selectedNumber == 3} // this will be disabled if selected value of the first dropdown is 3
        />
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

一种更好的方法是在状态中的名称数组中添加'select name'，因为在状态中添加'select name'之后，您只需要在App组件中进行一些更改以获得所需的功能。

const DropDown = ({ selectedValue, disabled, options, onChange }) => {
  return (
    <select onChange={onChange} disabled={disabled}>
      {
        options.map(o => <option value={o} selected={o == selectedValue}>{o}</option>)
      }
    </select>
  );
}


class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      numbers: [1, 2, 3, 4, 5], // 3 should disable the second dropdown and reset
      names: ['select name', 'john', 'jane', 'eric'],
      selectedNumber: '',
      selectedName: ''
    }

    this.onNumbersChange = this.onNumbersChange.bind(this);
    this.onNamesChange = this.onNamesChange.bind(this);
  }

  onNumbersChange(e) {
    if (e.target.value == 3) {
       this.setState({ selectedName: this.state.names[0] });
    }
    this.setState({ selectedNumber: e.target.value });
  }

  onNamesChange(e) {
    this.setState({ selectedName: e.target.value });
  }

  render() {
    const { numbers, names, selectedNumber, selectedName } = this.state;
    return (
      <div>
        <DropDown
          options={numbers}
          selectedValue={selectedNumber}
          onChange={this.onNumbersChange}

        />
        <DropDown
          options={names}
          selectedValue={selectedName}
          onChange={this.onNamesChange}
          disabled={selectedNumber == 3} // this will be disabled if selected value of the first dropdown is 3
        />
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>