在html select中获取当前选中的onBlur选项

Question

I have a Select element in my react Component:

 <select id={id} value={value || ''} onChange={this.onChange} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} onFocus={this.onFocus} onBlur={this.onBlur} > <option value="">Please select a value</option> {items.map(item => ( <option value={item.key} key={item.key}> {item.value} </option> ))} 

On the onBlur function I want to get the value prop of the currently selected option element in the select list.

  onBlur = (e) => { console.log(e.target.value) // want to get the currently selected options value here }; 

Answer 1

You can use state for storing the value of selected data.Then get the data from state when onBlur is called

<select
    id={id}
    value={this.state.selectedValue}
    onChange={this.onChange}
    onMouseOver={this.onMouseOver}
    onMouseLeave={this.onMouseLeave}
    onFocus={this.onFocus}
    onBlur={this.onBlur}
>

<option value="">Please select a value</option>
{items.map(item => (
    <option value={item.key} key={item.key}>
        {item.value}
    </option>
))}
onChange(event) {
this.setState({'selectedValue':event.target.value})
}
onBlur() {
console.log(this.state.selectedValue)
}