我有一个使用html select
元素的表单。
<select className="form-control" id="ntype" required >
<option value = "">None</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select>
我知道使用html input
类型元素,我们可以像下面的代码那样附加ref
ref = {(input) => { this.nHeading = input; }}
以及
<input
type = "text"
className = "form-control"
id = "tInput"
placeholder = "Sample input"
ref = {(input) => { this.sInput = input; }}
required
/>
如何将ref附加到<Select>
元素,并在提交表单时从附加的ref
中获得选定的option value
?
是否需要将ref
附加到每个选项或select
元素本身?
4条答案
按热度按时间yeotifhr1#
您可以在更改时将值存储在某个状态中,并在以后使用,即使其成为受控组件
或者,您可以使用
refs
来获取如下所示的值一个二个一个一个
ruarlubt2#
我将为每个元素指定一个值,并为select元素指定onChange处理程序,如下所示
并定义一个设置选择状态的onChange处理程序
}
zazmityj3#
如果使用React功能组件,则可以执行以下操作。
那么您可以通过以下方式访问提交逻辑中的值:
selectRef.current.value
xggvc2p64#
您可以只使用onChange函数来设置Ref的值。例如: