Javascript 在“选择多个”中渲染组件时，如何取消选中第一个选项？

加载“选择多个”时，始终选择第一个选项。仅当通过按住

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

createSelectItems（输入项目）{
设项目=[]；
for（设i=0；i0）{
返回(
为{this.props.device}选择接口
{this.createSelectItems（this.state.interfaces）}
{this.state.selected_interfaces}

{this.state.selected_interfaces.length>0&&submit}
);
}
返回null；
}

在这种情况下，“提交”按钮也不会显示。我如何缓解这种情况

---

使用以下方法更改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;
 }

createSelectItems（输入项目）{
设项目=[]；
项目。推送（选择选项…）
for（设i=0；i

您好，我已经更新了问题，您能根据它回答吗？

选择一个选项…

这很有效，谢谢。我尝试禁用

但默认情况下它选择了下一个选项，这也是第一个选项
主要的
。我可以编辑您的答案并接受吗？我已经编辑了，它正在等待同行审查，不知道是谁视图默认情况下，第一个选项处于选中状态，因此如果选择第一个选项，则不会触发onChange。@PrathisriHasredy我已审阅编辑并接受，您是否可以接受回答您的意思是将其作为占位符？@PrashantPimpale否，我的意思是在加载时删除
主
的灰色背景。