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

时间:2019-03-18 13:12:17

标签: javascript html css reactjs semantic-ui

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

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

ui错误的屏幕截图:

enter image description here

有人知道为什么不选中按钮吗?

单选按钮的代码:

  <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>

3 个答案:

答案 0 :(得分:2)

标签必须具有“ for”属性,输入元素才能对其标签的单击做出反应。

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

我相信,如果您向Radio元素添加“ id”属性,它应该会起作用。

更多信息可以在这里找到:HTML element

答案 1 :(得分:0)

尝试添加checked = true而不是checked={isTransferred === false},还尝试在label内插入value的值

答案 2 :(得分:0)

就我而言,它通过波纹管修改而起作用。

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