Reactjs 如何在react select中传递要禁用的选项数？

我正在使用react select来显示select。我需要通过选项列表来禁用它们

以下是我要禁用的选项数组：

["1001","1002","1003","1004"]

这是渲染

isOptionDisabled(arr) {
  let fil = arr.filter(val =>
     val.value == "1002"//hardcoded for testing needs
  )
  console.log("fil", fil); //here is console I have Object
  return option => {
    console.log("fil2", fil); // here is console I have empty array fill=[]
    return option.value == ["1002"]//hardcoded for testing needs. THIS PART WORKS
  } 
}

return (
    <Select
       value={selectedOption}
       onChange={this.handleChange}
       options={options}
       isOptionDisabled={this.isOptionDisabled(props.arr)}
     />
)

isOptionDisabled（arr）{
设fil=arr.filter（val=>
val.value==“1002”//硬编码以满足测试需求
)
log（“fil”，fil）；//这是我有对象的控制台
返回选项=>{
log（“fil2”，fil）；//这是控制台，我有空数组填充=[]
return option.value=[“1002”]//针对测试需要进行硬编码。此部分有效
} 
}
返回(
)

基本上，它使用硬编码数据。但当我尝试使用/传递过滤数组时，它显示空值。如何将select的选项与my array中的选项进行比较

---

为什么变量fil在

（option）=>…

函数中使用时变为空？

从react select包中，我想您可以指定一个布尔值

例如，您必须执行以下操作：

var allOpts = [1001, 1002, 1003, 1004, 1005, 1006, 1007];
var disabledOpts = [1001, 1002, 1003, 1004];

// pass a function to map
const newOpt = allOpts.map(function(o){
  let opt = {id: o};
  opt.show = disabledOpts.indexOf(o) < 0;
  return opt;
});

var-allOpts=[1001100021003100400510061007]；
var disabledOpts=[10011002,10031004]；
//将函数传递给映射
const newOpt=allOpts.map（函数（o）{
设opt={id:o}；
opt.show=disabledOpts.indexOf（o）<0；
返回opt；
});

然后：

<Select
       value={selectedOption}
       onChange={this.handleChange}
       options={newOpt}
       isOptionDisabled={option => option.show === false}
     />

option.show==false}
/>

默认情况下

isOptionDisabled

接受作为参数传递的完整选项，返回选项是否被禁用

因此，您可以使用

isOptionDisabled

函数所理解的格式，使用旧选项数组创建新的选项数组

此外，您还需要两个函数来实际显示

select

中的值，即

getOptionLabel

和

getOptionValue

，如下所示

import React, { Component } from "react";
import Select from "react-select";

let optionsArray = [1001, 1002, 1003, 1004, 1005, 1006, 1007];
let disabledArray = [1001, 1002, 1003, 1004];
optionsArray = optionsArray.map(val => disabledArray.includes(val) ? { title: val, isDisabled: true } : { title: val, isDisabled: false })

class App extends Component {

    isOptionDisabled = option => {
        return option.isDisabled;
    }

    getOptionLabel = option => option.title;

    getOptionValue = option => option.title;

    render() {
        return (
          <div>
            <Select
              options={optionsArray}
              getOptionLabel={this.getOptionLabel}
              getOptionValue={this.getOptionValue}
              isOptionDisabled={this.isOptionDisabled.bind(this)}
            />
        </div>
        )
    }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

import React，{Component}来自“React”；
从“反应选择”导入选择；
让选项数组=[1001100031004100510061007]；
设disabledArray=[100110210031004]；
optionsArray=optionsArray.map（val=>disabledArray.includes（val）{title:val，isDisabled:true}:{title:val，isDisabled:false}）
类应用程序扩展组件{
isOptionDisabled=选项=>{
返回选项。已禁用；
}
getOptionLabel=option=>option.title；
getOptionValue=option=>option.title；
render（）{
返回(
)
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

为什么是高阶函数？@Dupocas是代码的示例部分。问题在于该行console.log（“fil2”，fil）；//这里是控制台，我有空数组填充=[]