Радиокнопки в таблице Semanti c UI React сохраняют отмеченный атрибут после выбора другого радиокнопки в той же строке?

Question

Мои радиокнопки имеют то же имя, поэтому я ожидаю, что поведение будет следующим:

• выбрать радиокнопку
• увидеть, что у него есть атрибут checked
• выберите другой переключатель в той же строке, а затем
• убедитесь, что он имеет атрибут checked, а первый уже не имеет.

Вместо этого:

• Я выбираю переключатель
• вижу, что это checked
• щелкаю другой, и
• пользовательский интерфейс показывает, что первый one больше не проверяется, но сохраняет атрибут 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. Следующий пример, также доступный на Semanti c 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>
    )
  }
}