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>
);
}
}
Controlled Components to Get Dropdown Menu Value in React First, we must set up an event listener on the <select> element and define an event handler. In our example, it takes one argument - e (short for event) and calls the setFruit() function. To set the state with the selected value, we access the e. target.
The text of an option is simply the label property of the corresponding item . In your case, to retrieve the text of the selected option, you can do: var selectedItem = this.
The options available are : dialog and dropdown. If dialog mode the picker items will be displayed in a modal dialog. If dropdown it will display like normal dropdown mode. The callback function that will get called when the item from the picker is selected.
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 })
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With