React?에서 특정 옵션을 선택했을 때 드롭 다운을 비활성화하는 방법.

Question

나는 반응 테이블 (https://react-table.js.org)을 사용하여 테이블을 구현했습니다. 서버에서 가져온 데이터를 기반으로 데이터를 채 웁니다. 지금은 두 개의 열 위에 두 개의 필터 드롭 다운이 있습니다. 열 1 필터 드롭 다운이 특정 값으로 설정된 경우 열 2 필터 드롭 다운을 비활성화하고 싶습니다. 다음과 같이

나는 기본 필터 드롭 다운을 구현 한 : 나는 첫 번째 드롭 다운에서 그룹 1을 선택하면

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

는 두 번째 드롭 다운이 활성화 될 필요가있다. 그러나 첫 번째 드롭 다운이 모두로 설정된 경우 드롭 다운 2를 비활성화해야합니다. 위의 구현 방법은 무엇입니까?

Answer 1

부모 구성 요소에서 선택한 값을 관리하고 조건에 따라 disabled 소품을 전달할 수 있습니다. 예를 들어
상기 예에서는, 2 개 DropDown 구성 요소 names 배열

사용자가 다운 numbers 드롭 수 3을 선택하는 경우와 numbers 배열

함께

1. 이 아래 이렇게하면 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>