javascript 在 React 中选择特定选项时如何禁用下拉菜单？

How to disable dropdown when a specific option is selected in React?

提问by SeaWarrior404

I have implemented a table using React Table(https://react-table.js.org). I populate the data based on the data I get from server. Right now I have two filter dropdowns on top of two columns. I want to disable column 2 filter dropdown if the column 1 filter dropdown is set to a specific value.

我已经使用 React Table ( https://react-table.js.org)实现了一个表格。我根据从服务器获得的数据填充数据。现在我在两列顶部有两个过滤器下拉列表。如果第 1 列过滤器下拉列表设置为特定值，我想禁用第 2 列过滤器下拉列表。

I have implemented the basic filter dropdown as follows:

我已经实现了基本的过滤器下拉菜单如下：

    {
              Header: 'Name',
              accessor: 'Name',
              id: 'Name',
              Cell: ({ value }) =>
              value === 'group1' ? 'group1' : 'group2',
              filterMethod: (filter, row) => {
                if (filter.value === 'all') {
                  return true;
                }
                if (filter.value === 'group1') {
                  return row[filter.id] === 'group1';
                }
              },
              Filter: ({ filter, onChange }) => (
                <select
                    onChange={event => onChange(event.target.value)}
                    style={{ width: '100%' }}
                    value={filter ? filter.value : 'all'}
                >
                  <option value="all">All</option>
                  <option value="group1">Group1</option>
                </select>
            ),
            },
            {
              filterable: ({ val }) => {
                  if (tenantName.value === 'group1') {
                    return true;
                  }
                  else {
                    return false;
                  }
              },
              Header: 'ID',
              accessor: 'Id',
              id: 'Id',
              Cell: ({ value }) => (value === '3' ? '3' : '5'),
              filterMethod: (filter, row) => {
                if (filter.value === 'all') {
                  return true;
                }
                if (filter.value === '3') {
                  return row[filter.id] === '3';
                }
                if (filter.value === '5') {
                  return row[filter.id] === '5';
                }

              },
              Filter: ({ filter, onChange }) => (
                <select
                    onChange={event => onChange(event.target.value)}
                    style={{ width: '100%' }}
                    value={filter ? filter.value : 'all'}
                >
                  <option value="all">All</option>
                  <option value="3">3</option>
                  <option value="5">5</option>
                </select>
            ),
            },
          ],

If I select Group1 in the first dropdown, the second dropdown needs to be enabled. However if the first dropdown is set to All then the dropdown 2 needs to be disabled. How to implement the above?

如果我在第一个下拉列表中选择 Group1，则需要启用第二个下拉列表。但是，如果第一个下拉列表设置为 All，则需要禁用下拉列表 2。如何实现以上内容？

回答by Sagiv b.g

You can manage the selected values in a parent component and pass a disabledprop according to your condition.
For example, in the example below we have 2 DropDowncomponents

您可以管理父组件中的选定值并disabled根据您的条件传递道具。
例如，在下面的示例中，我们有 2 个DropDown组件

1. With the numbersarray
2. With the namesarray

1. 随着numbers阵列
2. 随着names阵列

If the user select the number 3from the numbersdrop down, this will make the namesdrop down to be disabled.

如果用户3从numbers下拉列表中选择数字，这将使names下拉列表被禁用。

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
      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>