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

Question

我已经使用 React Table(https://react-table.js.org) 实现了 table。我根据从服务器获得的数据填充数据。现在我在两列的顶部有两个过滤器下拉列表。如果第 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>
            ),
            },
          ],

如果我在第一个下拉列表中 select Group1，则需要启用第二个下拉列表。但是，如果第一个下拉菜单设置为全部，则需要禁用下拉菜单 2。如何实现以上？

Answer 1

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

用numbers数组
用names数组

如果用户 select numbers 下拉列表中的数字 3，这将使 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>

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

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

javascript

dropdownbox

web

drop-down-menu

reactjs