在选择同一行中的另一个单选按钮后，语义 UI React table 中的单选按钮会保留选中的属性吗？

Question

我的单选按钮具有相同的名称，因此我期望的行为是：

• select 单选按钮
• 看到它有checked属性
• select同一行的不同单选按钮，然后
• 看到它具有 checked 属性，而第一个不再具有。

改为：

• 我点击一个单选按钮
• 看到是checked
• 点击另一个，然后
• UI 显示不再检查第一个，但在我检查源代码时它保留了 checked 属性。

为什么这些单选按钮不能完全相互交互？

                  <Form onSubmit={(e) => { handleAnswerFormSubmit(e) }}>
                    <Table celled>
                      <Table.Body>
                        <Table.Row>
                          <Table.Cell>
                            airplane
                          </Table.Cell>
                          <Table.Cell>
                            <Radio name="airplane" value="1" />
                          </Table.Cell>
                          <Table.Cell>
                            <Radio name="airplane" value="2" />
                          </Table.Cell>
                          <Table.Cell>
                            <Radio name="airplane" value="3" />
                          </Table.Cell>
                        </Table.Row>
                      </Table.Body>
                    </Table>
                    <Form.Button>Continue</Form.Button>
                  </Form>

Answer 1

我想你要找的是Radio group。以下示例也可在 Semantic UI React Docs 上找到，将为您提供帮助。代码如下：

export default class RadioExampleRadioGroup extends Component {
  state = {}
  handleChange = (e, { value }) => this.setState({ value })

  render() {
    return (
      <Form>
        <Form.Field>
          Selected value: <b>{this.state.value}</b>
        </Form.Field>
        <Form.Field>
          <Radio
            label='Choose this'
            name='radioGroup'
            value='this'
            checked={this.state.value === 'this'}
            onChange={this.handleChange}
          />
        </Form.Field>
        <Form.Field>
          <Radio
            label='Or that'
            name='radioGroup'
            value='that'
            checked={this.state.value === 'that'}
            onChange={this.handleChange}
          />
        </Form.Field>
      </Form>
    )
  }
}