React？で特定のオプションが選択されているときにドロップダウンを無効にする方法

私は、反応テーブル（https://react-table.js.org）を使ってテーブルを実装しました。私はサーバーから取得したデータに基づいてデータを作成します。今は2つの列の上に2つのフィルタードロップダウンがあります。列1のフィルターのドロップダウンが特定の値に設定されている場合は、列2のフィルターのドロップダウンを無効にします。 React？で特定のオプションが選択されているときにドロップダウンを無効にする方法

次のように私は、基本フィルタドロップダウンを実現しています

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

私は最初のドロップダウンでグループ1を選択した場合は、2番目のドロップダウンを有効にする必要があります。ただし、最初のドロップダウンがすべてに設定されている場合は、ドロップダウン2を無効にする必要があります。上記の実装方法は？

出典

2017-09-20 SeaWarrior404

親コンポーネントで選択した値を管理し、条件に応じてdisabled小道具を渡すことができます。
ユーザがダウンnumbers dropから数3を選択した場合、例えば、実施例では、我々は

namesアレイとnumbersアレイ

で2つのDropDown成分

を有する下に、これにより、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>

出典

2017-09-20 09:23:19

React？で特定のオプションが選択されているときにドロップダウンを無効にする方法

答えて

関連する問題