时间戳

首页 > 解决方案 > 如何显示多个无线电组的多种不同状态？

javascript - 如何显示多个无线电组的多种不同状态？

问题描述

目前在表单中使用 Semantic-UI-React，并希望在该表单中使用多个 Radio 部分。在 SUIR 示例代码中，选定的单选按钮通过状态显示为标题，但是我希望有多个单选选项分组来显示相应的选定按钮值。如何更改当前状态的写入，以便仅反映它所属的选项分组的选定单选值？

我曾尝试将 id 属性添加到 Radio 元素，然后将显示标题从 {this.state.value} 更改为 {this.id.state.value}，但这当然不起作用。

// 这是我的状态声明：

state = {};
  handleChange = (e, { value }) => this.setState({ value });

// 显示标题：

<Form.Field>
  Category:
  <b style={{ marginLeft: 20 }}>{this.state.value}</b>
</Form.Field>

//显示各种单选选项的网格行：

<Grid.Row id="Category" columns={4}>
                <Grid.Column>
                  <Radio
                    label="Health & Wellness"
                    name="radioGroup"
                    value="Health & Wellness"
                    checked={this.state.value === "Health & Wellness"}
                    onChange={this.handleChange}
                  />
                </Grid.Column>
                <Grid.Column>
                  <Radio
                    label="Finance"
                    name="radioGroup"
                    value="Finance"
                    checked={this.state.value === "Finance"}
                    onChange={this.handleChange}
                  />
                </Grid.Column>
                <Grid.Column>
                  <Radio
                    label="Culture"
                    name="radioGroup"
                    value="Culture"
                    checked={this.state.value === "Culture"}
                    onChange={this.handleChange}
                  />
                </Grid.Column>
                <Grid.Column>
                  <Radio
                    label="Other"
                    name="radioGroup"
                    value="Other"
                    checked={this.state.value === "Other"}
                    onChange={this.handleChange}
                  />
                </Grid.Column>
              </Grid.Row>

这是复制并再次粘贴在下方以进行额外的无线电分组。

我希望第一个引用相对选择的值，而附加组中的第二个则可以执行相同的操作，但是在选择任一组中的任何单选按钮时，状态都会反映两个元素中的选择值。

标签： javascriptreactjsstatesemantic-ui

解决方案

将name每个组的 用作状态中的属性

state = {group1: null, group2: null};
handleChange = (e, {name, value }) => this.setState({[name]: value });

两个不同的组项目：

            /* group 1 */
            <Grid.Column>
              <Radio
                label="Finance"
                name="group1"
                value="Finance"
                checked={this.state.group1 === "Finance"}
                onChange={this.handleChange}
              />
            </Grid.Column>
            /* group2 */
            <Grid.Column>
              <Radio
                label="Culture"
                name="group2"
                value="Culture"
                checked={this.state.group2 === "Culture"}
                onChange={this.handleChange}
              />
            </Grid.Column>

推荐阅读