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

【问题标题】：ReactJS , How to change form type, from onChange dropdownReactJS，如何从 onChange 下拉菜单中更改表单类型
【发布时间】：2017-12-01 12:28:16
【问题描述】：

我正在学习 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;

我希望它根据所选值而改变。如果选择了下拉菜单。比出现下拉表单。等等。是否可以？最好的方法是什么？谢谢。

【问题讨论】：

向你的组件添加一个constructor()，并使用state/setState根据用户操作显示隐藏你想要的任何内容。

标签： javascript reactjs ecmascript-6

【解决方案1】：

您可以使用conditional rendering 在渲染组件之前检查特定条件。

有点像：

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

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

【讨论】：