ドロップダウンの値に基づいて可視性を切り替えるReactJS

Question

別のドロップダウンの値に基づいてドロップダウンの表示を切り替えようとしています。したがって、最初のオプションが選択されると、2番目のドロップダウンが下に表示され、そのオプションが選択されなくなると、下のドロップダウンは消えます。

私はまだ学んでいるように私に同行してください。助言や助けをいただければ幸いです！ここで私はこれまで持っているものです。

const firstOptions = [ 
 
    { key: 0, value: 'default', text: '--Select an Option--' }, 
 
    { key: 1, value: 'option1', text: 'option1 - when I am selected another shall appear' }, 
 
    { key: 2, value: 'option2', text: 'option2' }, 
 
    { key: 3, value: 'option3', text: 'option3' }, 
 
]; 
 

 
const secondOptions = [ 
 
    { key: 0, value: 'default', text: '--Select an Option--' }, 
 
    { key: 1, value: 'option1', text: 'option1' }, 
 
    { key: 2, value: 'option2', text: 'option2' }, 
 
]; 
 

 
class DropdownToggle extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     selectedValue: 'default', 
 
    }; 
 
    } 
 

 
    handleChange = (e) => { 
 
    this.setState({ selectedValue: e.target.value }); 
 
    } 
 

 
    render() { 
 
    const message = 'You selected ' + this.state.selectedValue; 
 
    return (
 
     <div style={{ marginTop: '50px', marginLeft: '50px' }}> 
 
     <Dropdown 
 
      options={firstOptions} 
 
      selection 
 
      value={this.state.selectedValue} 
 
      onChange={this.handleChange} 
 
     /> 
 
     <div style={{ marginTop: '50px' }}> 
 
      <Dropdown 
 
      options={secondOptions} 
 
      selection 
 
      /> 
 
     </div> 
 
     <p>{message}</p> 
 
     </div> 
 
    ); 
 
    } 
 
}

Answer 1

あなたが必要な動作を実現するために、条件付きレンダリングを行うことができます。

例

render() { 
    const message = 'You selected ' + this.state.selectedValue; 
    return (
     <div style={{ marginTop: '50px', marginLeft: '50px' }}> 
     <Dropdown 
      options={firstOptions} 
      selection 
      value={this.state.selectedValue} 
      onChange={this.handleChange} 
     /> 
     { 
      this.state.selectedValue === 'option1' ? 
      <div style={{ marginTop: '50px' }}> 
       <Dropdown 
       options={secondOptions} 
       selection 
       /> 
      </div> 
      : null 
     } 
     <p>{message}</p> 
     </div> 
    ); 
    } 

更新

あなたhandleChange機能が正しくありません。 Semantic-UI文書onChangeによると、2つのパラメータで発生します。 eventおよびdata。あなたが以下のようにあなたの関数を変更するなら、それはうまくいくはずです。

のonChange{FUNC}

ユーザが値を変更しようとするときに呼び出さ。

のonChange（イベント：SyntheticEvent、データ：オブジェクト）

イベントは独自のSyntheticEventを反応します。

データすべての小道具と提案値。

handleChange = (event, data) => { 
    console.log(data.value); 
    this.setState({selectedValue: data.value}); 
}