ReactJS，如何从onChange下拉菜单更改表单类型

Question

I'm learning ReactJS, I have dropdown from semantic-ui , and I want it to add onChange event on it. when dropdown change, the form below also change. is it possible? anyone know how to do it?

this is my code.

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;

I want it to change depending on selected value. if dropdown is selected. than the dropdown form appear. and so on. is it possible? what is the best way to do it? Thanks.

Answer 1

You can work with conditional rendering where you check for a specific condition before render your component.

Something as:

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

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