ReactJS、onChangeドロップダウンからフォームタイプを変更する方法

Question

私はReactJSを学んでいます。私はsemantic-uiからドロップダウンを持っており、onChangeイベントを追加したいと思います。ドロップダウンが変更されると、下のフォームも変更されます。出来ますか？誰もそれを行う方法を知っていますか？

これは私のコードです。

layout

class EditForm extends React.Component { 
    componentWillMount() { 
     this.setState({ 
      options: [ 
      { key: 1, text: 'Input', value: '1' }, 
      { key: 2, text: 'Dropdown', value: '2' }, 
      { key: 3, text: 'Radio Boxes', value: '3' }, 
      { key: 4, text: 'Checkboxes', value: '4' }, 
      { key: 5, text: 'Paragraph', value:'5'}, 
      ], 
      selected: ['0'], 
     }); 
     } 

     handleChange = (e, { value }) => this.setState({ 
     value 
     }) 
     render() { 
     const { value } = this.state 
     return(
      <Segment clearing> 
       <Container textAlign='right'> 
        <Dropdown selection 
        onChange={this.handleChange} 
        options={this.state.options} 
        value={value} 
        defaultValue={this.state.selected} 
        /> 
       </Container> 
       <Form.Group widths='equal'> 
      <Form.Field> 
       <Input 
       style={{width:'480px'}} 
       /> 
      </Form.Field> 
      <Form.Field > 
       <Button animated='vertical' floated='right' > 
       <Button.Content hidden>Delete</Button.Content> 
       <Button.Content visible> 
        <Icon name='trash outline' /> 
       </Button.Content> 
       </Button> 
       <Button animated='vertical' floated='right'> 
       <Button.Content hidden>Copy</Button.Content> 
       <Button.Content visible> 
        <Icon name='copy' /> 
       </Button.Content> 
       </Button> 
      </Form.Field> 
      </Segment> 
     ); 
     export default EditForm; 

私はそれが選択した値に応じて変更します。ドロップダウンが選択されている場合ドロップダウンフォームが表示されます。等々。 それは可能ですか？それをする最善の方法は何ですか？ありがとう。

Answer 1

conditional renderingで作業することができます。ここでは、コンポーネントをレンダリングする前に特定の条件を確認します。

何か：

render() { 
    const { value } = this.state 

    return (
    <div> 
     {value === 'dropdown' && <Component1>...</Component1>} 
     {value === 'text' && <Component2></Component2>} 
     {value === 'checkboxes' && <Component3></Component3>} 
     ... 
    </div> 
) 
}