드롭 다운 값에 따라 가시성 토글 ReactJS

Question

다른 드롭 다운의 값에 따라 드롭 다운의 가시성을 토글하려고합니다. 따라서 첫 번째 옵션을 선택하면 두 번째 드롭 다운이 아래에 표시되고 해당 옵션을 더 이상 선택하지 않으면 아래 드롭 다운이 사라집니다.

나는 아직도 배우고 있기 때문에 저와 함께하시기 바랍니다. 어떤 조언이나 도움을 주시면 감사하겠습니다! 여기에 지금까지 무엇을 가지고 :

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}); 
}