如何为多个无线电组显示多个不同的状态?

Question

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

我尝试将 and 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>

这将在下面再次复制并粘贴，以用于其他无线电分组。

我希望第一个引用相对选定的值，而附加组中的第二个引用相同的值，但是当选择任一组中的任何单选按钮时，状态会反映两个元素中的选择值。

Answer 1

将每个组的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>