作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有大约 50 个选项要显示在 react 选择选项中。但我想排除一些与已发布的值具有逻辑的选项。目的是,我们有一个表单,可以从下拉列表中添加值。如果添加了一项,则不必将其显示在下拉列表中。
重构代码:
export default function App() {
const choices = [
{
value: 0,
label: "Container empty to shipper"
},
{
value: 1,
label: "Container pickup at shipper"
},
{
value: 2,
label: "Container arrival at first POL (Gate in)"
},
{
value: 3,
label: "Container loaded at first POL"
}
];
const postedList = [
"Container empty to shipper",
"Container pickup at shipper"
];
return (
<div className="App">
<h1>Select Box</h1>
<Select
isClearable={false}
// here the choices should be 2 eliminating the other 2 whose labels are matching to postedlist
options={choices}
defaultValue={choices[0]}
onChange={(choice) => console.log(choice.value)}
/>
</div>
);
}
目前,它正在呈现所有 4 个可用选项,但我只想返回其中 2 个标签与 postedlist
不匹配的选项
我还创建了 Codesandbox 。如果你想在那里看到它。
最佳答案
您可以使用Array.prototype.filter()和 Array.prototype.includes()过滤掉已经发布的项目。然后使用 filteredList
作为 Select
组件的输入,如下所示。
const filteredList = choices.filter(({ label }) =>
!postedList.includes(label)
);
return (
<div className="App">
<h1>Select Box</h1>
<Select
isClearable={false}
options={filteredList}
defaultValue={filteredList[0]}
onChange={(choice) => console.log(choice.value)}
/>
</div>
);
关于reactjs - 如何从 React Select 选项中排除某些选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72242254/
我是一名优秀的程序员,十分优秀!