javascript - 如何在react-select中禁用某些选项

Question

我在禁用react-select中的某些选定值时遇到问题。我搜索了doc，发现其中一些但不起作用。我附上了代码片段，以便更好地查看-

<Select
  name="selectUsdAdmin"
  id="selectUsdAdmin"
  value={this.state.usdAdminValue}
  options={this.state.usdOptions}
  onChange={this.handleUsdAdminChange}
  multi
  className={!this.state.isUsdAdminSelectValid ? "is-invalid" : ""}
/>;

我尝试使用文档中提到的isDisabled prop，但它用于禁用整个选择框。非常感谢您的帮助。

Answer 1

只需将isDisabled属性添加到选项数据中就可以了

{ value: "blue", label: "Blue", isDisabled: true },

反应选择document




使用演示

import React from "react";
import "./styles.css";
import Select from "react-select";

const data = [
  { value: "ocean", label: "Ocean", color: "#00B8D9", isFixed: true },
  { value: "blue", label: "Blue", color: "#0052CC", isDisabled: true },
  { value: "orange", label: "Orange", color: "#FF8B00" },
  { value: "yellow", label: "Yellow", color: "#FFC400" },
];

export default function App() {
  return (
    <div className="App">
      <Select name="selectUsdAdmin" id="selectUsdAdmin" options={data} />
    </div>
  );
}