如何在使用多个选择的组件中呈现组件时，如何取消选择第一个选项？

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

使用以下方法更改createSelectItem，

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