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

Question

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

我已经实现了基本过滤器下拉列表，如下所示：

    {
              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>
            ),
            },
          ],

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

Answer 1

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

1. 随着numbers数组
2. 随着names数组

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>