[英]How to use react ref to get value from html select element?
I have a form in which I am using html select
element.我有一个表格,我在其中使用 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>
I know with html input
type element we can attach ref
like below code我知道 html
input
类型元素我们可以像下面的代码一样附加ref
ref = {(input) => { this.nHeading = input; }}
and和
<input
type = "text"
className = "form-control"
id = "tInput"
placeholder = "Sample input"
ref = {(input) => { this.sInput = input; }}
required
/>
How can I attach ref to <Select>
element and get selected option value
from the attached ref
when form is submitted?如何在提交表单时将 ref 附加到
<Select>
元素并从附加的ref
中获取选定的option value
?
Do I need to attach ref
to each options or select
element itself?我是否需要将
ref
附加到每个选项或select
元素本身?
You can store the value in a state on change and later use that ie make it a controlled component 您可以将值存储在更改后的状态中,以后再使用,即使其成为受控组件
class App extends React.Component { constructor() { super(); this.state = {selectValue: ''} } callThis = (e) => { this.setState({selectValue: e.target.value}, ()=> {console.log(this.state.selectValue)}); } render() { return ( <select onChange={this.callThis}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> ) } } ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>
Or you can use refs
to get the value like this 或者您可以使用
refs
这样获得值
class App extends React.Component { constructor() { super(); this.state = {selectValue: ''} } callThis = (e) => { console.log(this.selectVal.value) } render() { return ( <div><select ref={(input) => this.selectVal = input} 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> <input type="button" value="click" onClick={this.callThis}/></div> ) } } ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>
I would give each element a value and onChange handler for the select element like this 我会给每个元素一个值和像这样的select元素的onChange处理函数
<select className="form-control"onChange={this.onChange.bind(this)}>
<option value="">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
And define an onChange handler that sets the state of the selection 并定义一个onChange处理程序以设置选择状态
onChange(e){
this.setState({value: e.target.value}, function(){
// do other stuff
});
} }
If you are using React functional components, you can do the following.如果您使用的是 React 功能组件,则可以执行以下操作。
import { useState, useRef } from 'react';
...
const selectRef = useRef(null)
<select className="form-control" id="ntype" required ref={selectRef}>
<option value = "">None</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select>
then you can access the value in your submit logic by,然后您可以通过以下方式访问提交逻辑中的值,
selectRef.current.value
You can just use an onChange function to set the value of the Ref.您可以只使用 onChange function 来设置 Ref 的值。 Eg:
例如:
<select className="form-control" id="ntype" required onChange={e => {yourRef.current = e.target.value}} >
<option value = "">None</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.