反应选择onChange不使用选项值

Question

Hello i have this select component

<select
    value={(this.state.selectedVersion)}
    disabled={(this.state.versionDisable)}
    onChange={this.handleVersionChange}
>
    <option disabled hidden>Välj version</option>
    {
        this.state.versions.map((object, i) => {
            return (
                <option key={i} value={object}>
                    {object.text}{object.lastModified}
                </option>
            )
        })
    }
</select>

here i want the onChange event to take the options value wich i have logged is the thing i want and use it as value but when i send it to my onChange handler

handleVersionChange(event){
    console.log(event);
    this.setState({selectedVersion: event.target.value});
    console.log(this.state.selectedVersion);
}

The first console.log that logs the event that got sent i get some proxy object that i duno what it is or were it is from. I duno if i get this problem sincei create the options with the map. Anyone know what i am doing wrong?

Answer 1

I still think the problem is setting the value attribute on the option element as an Object. Consider using a string instead. You can always reverse lookup a value in your change handler from the original array to get the full object.

In the following example I use an attribute I created called id to use as the select option value. This value can be any unique identifier in your object which is a simple type like string or number. The same value can be used to reverse lookup the full object

Sample JS Fiddle

 class SelectApp extends React.Component { constructor(props) { super(props) this.state = { items: [ { text: "Learn JavaScript", id: 1 }, { text: "Learn React", id: 2 }, { text: "Play around in JSFiddle", id: 3 }, { text: "Build something awesome", id: 4 } ] } selected:null } handleChange = (e)=>{ // Get the selected value which is a string var selectedId = e.target.value; console.log(selectedId); // Reverse look up on the array to find the full object var selected = this.state.items.find((d)=>(d.id==selectedId)); console.log(selected); // Update state with object this.setState({selected}); } render() { return ( <div> <select onChange={this.handleChange}> <option disabled selected>Select</option> {this.state.items.map((item, i) => ( <option key={i} value={item.id}>{item.text}</option> ))} </select> </div> ) } } ReactDOM.render(<SelectApp />, document.querySelector("#app")) 

Answer 2

Your handleVersionChange need to be a listen function. Replace by this :

 handleVersionChange = (event) => {
     console.log(event);
     this.setState({selectedVersion: event.target.value});
     console.log(this.state.selectedVersion);
 }

Or in your constructor add :

this.handleVersionChange = this.handleVersionChange.bind(this)

Answer 3

Why do you put another pair of braces inside curly ones: {(this.state.selectedVersion)} ? Am I missing something: {this.state.selectedVersion} ?

Answer 4

Trying console logging in componentWillReceiveProps instead of inside your handle change function.

SetState is asynchronous.