reactjs - 如何使用另一个反应选择的值在反应选择中制作过滤器
问题描述
我正在使用 a 创建一个解决方案react-select
,并且一个选择应该只包含它不包含在另一个中的选项。前任
import React from 'react'
import Select from 'react-select'
const list = [
{ label: 'foo', value: 1 },
{ label: 'bar', value: 2 },
{ label: 'bin', value: 3 },
]
export default Test extends React.Component {
render = () => (
<>
<Select ref="a" options={list} />
<Select ref="b" options={list} filterOption={o => /* devo omitir "a" */} />
</>
)
}
我需要做什么才能让 a<Select ref="b" />
被 another 的值过滤<Select ref="a" />
?
解决方案
Laura 上面的答案在您编写自定义 filterOption 函数时会破坏过滤(如果您不希望 Select 可过滤,那么它可能没问题)。
options
一个更简单的解决方案是只在您通过的第二个 Select上应用一个简单的过滤器。
const options = [
{ label: "foo", value: 1 },
{ label: "bar", value: 2 },
{ label: "bin", value: 3 }
];
class App extends Component {
constructor(props) {
super(props);
this.state = {
value1: false,
value2: false
};
}
onChange = option => {
if (this.state.value2.value === option.value) {
this.setState({
value1: option,
value2: false
});
} else {
this.setState({ value1: option });
}
};
onChange2 = option => {
this.setState({ value2: option });
};
render() {
return (
<div className="App">
<Select
onChange={this.onChange}
options={options}
value={this.state.value1}
/>
<Select
onChange={this.onChange2}
options={options.filter(
option => option.value !== this.state.value1.value
)}
value={this.state.value2}
/>
</div>
);
}
}
推荐阅读
- python - 使用 spacy 偏移格式构建 GoldDoc 以使用 CLI 训练空白模型
- protractor - 量角器如何在我的量角器 spec.js 文件的外部文件中调用已定义的 customerlocator.js
- python - 使用 LSTM 进行未来时间序列预测
- proguard - 在 Apache Flink 应用程序上运行 ProGuard
- mongodb - MongoDB 查询 - 子文档
- java - 如何将进程中的 Json 对象放入 Google Dataflow 中的 Bigquery 表中
- symfony - 尝试在另一个 API 平台中调用 API 路由时超过最大执行时间
- c# - 在C#中单击按钮一一读取excel文件单元格值
- r - 使用 R 从 csv 文件创建 xml 文件
- html - 通过 JS 提示将自定义光标添加到 CSS 样式表