无线电参考反应

Question

我有无线电输入使用想使用 ref 在控制台上显示结果。

即使我选择了第一个值，我也总是得到第二个值。 这是构造函数

this.inputKelamin = React.createRef();

并像这样渲染

<div>
        Jenis Kelamin :
        <input name="kelamin" type="radio" value="laki - laki" ref={this.inputKelamin}/>
        Laki - laki
        <input name="kelamin" type="radio" value="perempuan" ref={this.inputKelamin}/>
        Perempuan
      </div>

onSubmit，我通过控制台这样说：

alamat : ${this.inputAlamat.current.value}

结果总是“perempuan” 不做制作，仅供学习，谢谢

Answer 1

您对两个元素使用相同的ref，第二个ref={this.inputKelamin} 覆盖第一个，它始终指向第二个单选按钮。

来自official docs

Refs 提供了一种访问 DOM 节点或在 render 方法中创建的 React 元素的方法。

您应该为两个输入创建 2 个不同的参考。

你在这里检查了错误的属性

this.inputAlamat.current.value

value 永远是你给value="perempuan" 的属性值。

如果是收音机，您应该查看checked 属性，它会告诉您它是否被选中

this.inputKelamin.current.checked

另外，您可能想查看controlled 和un-conntrolled 组件