ドロップダウンオプションの削除を反応

Question

私はReactJSを使い慣れていますが、すべて同じオプションが選択できる4つのドロップダウンメニューを作成しようとしていますが、オプションを選択すると、ドロップダウン。

Answer 1

あなたには、いくつかを提供してくださいすることができますが、すべての使用値を格納し、バックドロップダウンコンポーネントにプロパティとして渡す必要があります親コンポーネントを必要とするので、彼らは

const options = ['A', 'B', 'C', 'D', 'E']; 
const isNotUsed = unavailable => item => unavailable.indexOf(item) === -1; 

const Select = ({ onChange, unavailable, value, field }) => (
    <select onChange={e => onChange(e.target.value)} value={value}> 
    <option key="">Choose</option> 
    {options.filter(isNotUsed(unavailable)).map(item => (
     <option key={item} value={item}>{item}</option> 
    ))} 
    </select> 
); 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     values: {} 
    }; 
    } 

    handleChange(field, value) { 
    this.setState(state => ({ 
     ...state, 
     values: { 
     ...state.values, 
     [field]: value, 
     } 
    })); 
    } 

    render() { 
    const unavailableFor = (field) => 
     Object.keys(this.state.values) 
     .map(key => 
      key !== field 
      ? this.state.values[key] 
      : null 
     ) 
     .filter(Boolean); // remove empty 

    return (
     <div> 
      {['first', 'second', 'third', 'fourth'].map(field => (
      <Select 
       key={field} 
       field={field} 
       unavailable={unavailableFor(field)} 
       onChange={this.handleChange.bind(this, field)} /> 
      ))} 
     </div> 
    ); 
    } 
} 

Try it