I tried some thing for display value from select
tag.
The first thing I tried, is event.target.value
with an onChange
. The second thing I tried is 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> ); } }
Change your onChange to this.
onChange={this._handleChange}
Also another handleChange method you could try
handleChange(e) {
let {name, value} = e.target;
this.setState({
[name]: value,
});
}
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 _handleChange
in the onChange
handler. It is bad practice to include both
value={this.state.value}
defaultValue={this.state.value}
in a dropdown in React. You either supply one of the two but not both.
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 })
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.