单击标签时单选按钮不检查

Question

我在反应语义中有一组 3 个单选按钮 ui。

这工作正常。问题出在 UI 错误中，当我单击其中一个单选按钮时，未选中按钮。

ui 错误的屏幕截图：

有人知道为什么没有选中按钮吗？

单选按钮代码：

  <Form>
    <Form.Field>
      <Radio
        label="New Claims"
        name="isTransferred"
        value={false}
        checked={isTransferred === false}
        onChange={this.handleFilterChanged}
      />
    </Form.Field>
    <Form.Field>
      <Radio
        label="Transferred Claims"
        name="isTransferred"
        value={false}
        checked={isTransferred === true}
        onChange={this.handleFilterChanged}
      />
    </Form.Field>
    <Form.Field>
      <Radio
        label="New Claims and Trasferred Claims"
        name="isTransferred"
        value={'all'}
        checked={isTransferred === 'all'}
        onChange={this.handleFilterChanged}
      />
    </Form.Field>
  </Form>

更新：

生成 HTML 来自浏览器：

<div class="row">
<form class="ui form" style="padding-left: 3.3em;">
    <div class="field">
        <label>Assignments:</label>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" class="hidden" name="isTransferred" readonly="" tabindex="0" value="false">
            <label>New Claims</label>
        </div>
    </div>
    <div class="field">
        <div class="ui checked radio checkbox">
            <input type="radio" class="hidden" name="isTransferred" readonly="" tabindex="0" value="true">
            <label>Transferred Claims</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" class="hidden" name="isTransferred" readonly="" tabindex="0" value="all">
            <label>New Claims and Trasferred Claims</label>
        </div>
    </div>
</form>

Answer 1

标签必须具有 "for" 属性，输入元素才能响应对其标签的点击。

"for" 属性的值必须是输入元素的 "id"。

我相信如果您将 "id" 属性添加到 Radio 元素，它应该会起作用。

可在此处找到更多信息：HTML element

Answer 2

尝试添加 checked = true 而不是 checked={isTransferred === false} 并尝试将 label 的值插入 value

Answer 3

在我的案例中，它通过波纹管修改工作。

<Form.Radio
label="New Claims"
id="New Claims"
key="New Claims"
name="assignments"
value={isTransferred}
checked={isTransferred === true}
onChange={this.handleFilterChanged}
/>

单击标签时单选按钮不检查

Radio buttons do not check when clicking the label

html

javascript

css

reactjs

semantic-ui