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

引用提供了一种方法，可以访问在render方法中创建的DOM节点或React元素。

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

您正在此处检查错误的属性

this.inputAlamat.current.value

值将始终是您赋予value="perempuan"的属性值。

在广播的情况下，您应该查看checked属性，该属性告诉您是否已选择

this.inputKelamin.current.checked

此外，您可能希望查看controlled和un-conntrolled组件

无线电参考反应

1 个答案: