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