Question

我正在学习ReactJS，我从semantic-ui下拉，我希望它在其上添加onChange事件。下拉列表更改时，下面的表单也会更改。可能吗？有谁知道怎么做？

这是我的代码。

    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检查特定条件。

东西：

%2c

ReactJS，如何更改表单类型，来自onChange下拉列表

1 个答案: