无线电参考反应

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 provide a way to access DOM nodes or React elements created in the render method.

您应该为两个输入创建 2 个不同的引用。

而你在这里检查错了属性

this.inputAlamat.current.value

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

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

this.inputKelamin.current.checked

此外，您可能想查看 controlled and un-conntrolled 个组件

无线电参考反应

Radio ref on react

ref

radio

reactjs