Question

我的react组件中有一个Select元素：

<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函数上，我想获取选择列表中当前选择的选项元素的值prop。

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

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

1 个答案: