如何有多个反应选择选项
Posted
技术标签:
【中文标题】如何有多个反应选择选项【英文标题】:How to have multiple react-select options 【发布时间】:2021-03-02 04:00:46 【问题描述】:我正在使用 react-select,以便用户可以从下拉菜单中选择多个选项,但是我希望能够在我的应用程序中使用多个 react-select。
我在构造函数中有这个
class OrderForm extends Component
constructor()
super();
this.state =
selectedOption: [],
;
这里是handleChange函数
handleChange = (selectedOption) =>
this.setState( selectedOption , () =>
console.log(`Option selected:`, this.state.selectedOption)
);
;
我将如何实现这一点,以便我可以有 3 个这样的选择选项:
<Select
options=flavours
value=selectedOption
onChange=this.handleChange
placeholder="Choose your first mix"
isSearchable
isMulti
/>
<Select
options=flavours
value=selectedOption
onChange=this.handleChange
placeholder="Choose your second mix"
isSearchable
isMulti
/>
<Select
options=flavours
value=selectedOption
onChange=this.handleChange
placeholder="Choose your third mix"
isSearchable
isMulti
/>
当我更新一个选择时,它们都会更新。我知道这是因为函数,但是我不确定如何创建一个将特定选择的值存储在状态中的函数。
【问题讨论】:
【参考方案1】:解决方案很少。一种是您可以创建多个 handleChange 函数,每个选择器一个。每个人都可以设置不同的状态。如果您需要使用多个选择器更新同一个数组,则需要更复杂的逻辑来通过检查该值是否已存在于数组中来从单个数组中推/拉。
老实说,对于这样的事情,我建议使用表单并为每个选择器指定一个唯一的名称,不确定您是否熟悉,但 Formik 通过自动处理 onChange 内容使这样的事情变得非常容易。
【讨论】:
【参考方案2】:您可以拥有三个(或任意数量)风味选项,然后分别设置它们:
this.state =
selectedOptions: [],
;
handleChange = index => selectedOption =>
const updatedOptions = this.state.selectedOptions.map((o,i)=>i===index?selectedOption:o)
this.setState( selectedOptions:updatedOptions );
;
<Select
options=flavours
value=selectedOption
onChange=this.handleChange(0)
placeholder="Choose your first mix"
isSearchable
isMulti
/>
<Select
options=flavours
value=selectedOption
onChange=this.handleChange(1)
placeholder="Choose your second mix"
isSearchable
isMulti
/>
【讨论】:
【参考方案3】:您可以使用Select
组件的prop name
并使用onChange
方法的第二个参数访问它,如下所示。
你也最好对你的状态结构做一些改变:
this.state =
selectedOption:
first: ,
second: ,
third:
;
<Select
options=flavours
value=selectedOption.first
name="first"
...
/>
<Select
options=flavours
value=selectedOption.second
name="second"
/>
<Select
options=flavours
value=selectedOption.third
name="third"
...
/>
handleChange = (value, action) =>
this.setState(
selectedOption:
[action.name]: value
)
;
【讨论】:
以上是关于如何有多个反应选择选项的主要内容,如果未能解决你的问题,请参考以下文章