Javascript 从选择中获取价值——反应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47850489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
get value from select -- REACT
提问by KolaCaine
I tried some thing for display value from selecttag.
我尝试了一些东西来显示select标签的值。
The first thing I tried, is event.target.valuewith an onChange.
The second thing I tried is event.nativeEvent.value
我尝试的第一件事是event.target.value使用onChange. 我尝试的第二件事是event.nativeEvent.value
IMPOSSIBLE, so if you have a miracle for me ! I take that
不可能，所以如果你有我的奇迹！我把那个
So if you want, I post part of my code :
所以如果你愿意，我会发布我的部分代码：
class App extends Component {
constructor(props) {
super(props);
this._createBounds();
this.state = {
value: 'a'
}
}
_createBounds() {
['_handleSubmit', '_renderTasks', '_handleChange']
.forEach((fn) => this[fn] = this[fn].bind(this));
}
_handleChange(event) {
this.setState({ value: event.currentTarget.value }) // I tried before target.value, or nativeEvent.value
}
render() {
return (
<div className="container">
<div className="list-container">
<div className="list-select">
<select
onChange={this._handleChange()}
className="ant-input selectBox"
style={{width: 200}}
placeholder="Select a person"
ref={ref => {
this._select = ref
}}
value={this.state.value}
defaultValue={this.state.value}
>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
<option value="f">F</option>
<option value="g">G</option>
<option value="h">H</option>
<option value="i">I</option>
<option value="j">J</option>
<option value="k">K</option>
<option value="l">L</option>
<option value="m">M</option>
<option value="n">N</option>
<option value="o">o</option>
<option value="p">P</option>
<option value="q">Q</option>
<option value="r">R</option>
<option value="s">S</option>
<option value="t">T</option>
<option value="u">U</option>
<option value="v">V</option>
<option value="w">W</option>
<option value="x">X</option>
<option value="y">Y</option>
<option value="z">Z</option>
</select>
</div>
</div>
</div>
);
}
}回答by Gavin Thomas
Change your onChange to this.
将您的 onChange 更改为此。
onChange={this._handleChange}
Also another handleChange method you could try
您还可以尝试另一种 handleChange 方法
handleChange(e) {
let {name, value} = e.target;
this.setState({
[name]: value,
});
}
回答by codejockie
import React, { Component } from 'react';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
value: 'a'
}
}
_handleChange = (event) => {
this.setState({ value: event.target.value })
}
render() {
return (
<div className="container">
<div className="list-container">
<div className="list-select">
<select
onChange={this._handleChange}
className="ant-input selectBox"
style={{ width: 200 }}
placeholder="Select a person"
ref={ref => {
this._select = ref
}}
defaultValue={this.state.value}
>
<option value="a">A</option>
<option value="b">B</option>
...
</select>
</div>
</div>
</div>
);
}
}
You shouldn't invoke the _handleChangein the onChangehandler.
It is bad practice to include both
您不应_handleChange在onChange处理程序中调用。包含两者是不好的做法
value={this.state.value}
defaultValue={this.state.value}
in a dropdown in React. You either supply one of the two but not both.
在 React 的下拉菜单中。您可以提供两者之一，但不能同时提供。
If you intend to use that handler for multiple inputs, then you should consider doing this instead.
如果您打算将该处理程序用于多个输入，那么您应该考虑这样做。
_handleChange = ({ target: { name, value } }) => {
this.setState({ [name]: value })
}
