在 html 选择中获取当前选定的模糊选项

Question

>我的反应组件中有一个选择元素：

<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>
))}

在 onBlur 函数上，我想在选择列表中获取当前所选选项元素的值属性。

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

Answer 1

您可以使用

state来存储所选数据的值。然后在调用 onBlur 时从状态获取数据

<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)
}