Comment désactiver le menu déroulant lorsqu'une option spécifique est sélectionnée dans React?

Question

J'ai implémenté une table en utilisant React Table (https://react-table.js.org). Je peuple les données basées sur les données que je reçois du serveur. À l'heure actuelle, j'ai deux filtres déroulants sur deux colonnes. Je veux désactiver la liste déroulante du filtre de la colonne 2 si la liste déroulante du filtre de la colonne 1 est définie sur une valeur spécifique.

J'ai mis en œuvre dans le menu déroulant du filtre de base comme suit:

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

Si je sélectionne dans Groupe1 la première liste déroulante, le second menu déroulant doit être activé. Toutefois, si la première liste déroulante est définie sur Tous, la liste déroulante 2 doit être désactivée. Comment mettre en œuvre ce qui précède?

Answer 1

Vous pouvez gérer les valeurs sélectionnées dans un composant parent et transmettre un accessoire disabled en fonction de votre état.
Par exemple, dans l'exemple ci-dessous, nous avons 2 DropDown composants

1. Avec le tableau numbers
2. Avec le tableau names

Si l'utilisateur de sélectionner le numéro 3 de la baisse numbers vers le bas, cela fera tomber le names pour être désactivé.

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>