如何在React Multiselect下拉列表中禁用预选值复选框

问题描述

在这里，我使用了disablePreSelectedValues属性来禁用选定的值。但在下拉菜单中显示了所有选项，并且可以取消选中该选项。知道如何禁用复选框吗？

<Multiselect
     options={this.state.options} // Options to display in the dropdown
     selectedValues={this.state.selectedValue} // Preselected value to persist in dropdown
     onSelect={this.onSelect} // Function will trigger on select event
     onRemove={this.onRemove} // Function will trigger on remove event
     displayValue="name" // Property name to display in the dropdown options
     showCheckBox={true}
     disablePreSelectedValues={this.state.disablePreSelectedValues} />

解决方法

根据此处的源代码：

https://github.com/srigar/multiselect-react-dropdown/blob/89d7ca40b2631c28849d4ceec9bbb3326cc478f2/src/multiselect/multiselect.component.js#L370

isDisablePreSelectedValues(value) {
    const { isObject,disablePreSelectedValues,displayValue } = this.props;
    const { preSelectedValues } = this.state;
    if (!disablePreSelectedValues || !preSelectedValues.length) {
      return false;
    }
    if (isObject) {
      return (
        preSelectedValues.filter(i => i[displayValue] === value[displayValue])
          .length > 0
      );
    }
    return preSelectedValues.filter(i => i === value).length > 0;
  }

如果要禁用它们，还需要传递preSelectedValues数组。尝试以下操作：

<Multiselect
     options={this.state.options} // Options to display in the dropdown
     selectedValues={this.state.selectedValue} // Preselected value to persist in dropdown
     onSelect={this.onSelect} // Function will trigger on select event
     onRemove={this.onRemove} // Function will trigger on remove event
     displayValue="name" // Property name to display in the dropdown options
     showCheckbox={true}
     disablePreSelectedValues={this.state.disablePreSelectedValues} 
     preSelectedValues={selectedValues}
/>

dropdown reactjs reactjs