javascript - 当组件在多个选择中呈现时，如何取消选择第一个选项？

Question

加载选择多个选项时，始终会选择第一个选项。仅当按住ctrl键选择或选择其他选项时，它才会变为未选择状态。此功能的缺点是，当第一个选项是选择和提交的唯一选项时，无法调用 onChange 事件处理程序。

createSelectItems(input_items) {
    let items = [];
    for (let i = 0; i < input_items.length; i++) {
        items.push(<option key={i} value={input_items[i]}>{input_items[i]}</option>);
    }
    return items;

render() {
    if(this.state.interfaces.length>0){
    return (
        <div className="interfaces">
            <label>select interfaces for <strong>{this.props.device}</strong>
                <select onChange={this.onInterfaceSelected} multiple>
                    {this.createSelectItems(this.state.interfaces)}
                </select>
                <p>{this.state.selected_interfaces}</p>
            </label>
            { this.state.selected_interfaces.length >0 && <button className="submit" onClick={this.submitInterfaces}>submit</button>}
        </div>
    );
}
return null;
}

在这种情况下；提交按钮也不显示。我该如何缓解这种情况？

Answer 1

将您的 createSelectItems 更改为以下方法，

createSelectItems(input_items) {
    let items = [];
    items.push(<option value={0} hidden>Select an option...</option>)
    for (let i = 0; i < input_items.length; i++) {
        items.push(<option key={i} value={input_items[i]}>{input_items[i]}</option>);
    }
    return items;
 }