Reactjs 多次选择下拉选项
我希望能够选择一种我多次称为“跳过”的语言,而不会从下拉列表中消失。目前,我选择的任何语言都将从下拉列表中消失。这可能吗?这是我的密码:Reactjs 多次选择下拉选项,reactjs,Reactjs,我希望能够选择一种我多次称为“跳过”的语言,而不会从下拉列表中消失。目前,我选择的任何语言都将从下拉列表中消失。这可能吗?这是我的密码: const languages = [ { key: 'skip', text: 'Skip', value: 'Skip' }, { key: 'english', text: 'English', value: 'English' }, { key: 'french', text: 'French', value: 'French'
const languages = [
{ key: 'skip', text: 'Skip', value: 'Skip' },
{ key: 'english', text: 'English', value: 'English' },
{ key: 'french', text: 'French', value: 'French' },
]
handleAudioInputChange = (e, { name, value }) => this.setState( { [name]: value })
<Form.Select fluid search label='Audio Channels' name='audiochannelsValue' value={audiochannelsValue} options={languages} placeholder='Choose Audio Channels' onChange={this.handleAudioInputChange} multiple = "true"/>
const语言=[
{键:'skip',文本:'skip',值:'skip'},
{key:'english',text:'english',value:'english'},
{键:'french',文本:'french',值:'french'},
]
handleAudioInputChange=(e,{name,value})=>this.setState({[name]:value})
我尝试了多种方法,例如hideSelectedOptions={false},但这似乎不起作用。有什么想法吗?如果您只需要基于用户输入的字符串,可以执行以下操作:
handleAudioInputChange = (e, { value }) => {
this.setState(prevState => {
const newVal = `${prevState.audiochannelsValue.length ? '/' : ''}${value}`;
return {
textValue: prevState.textValue.concat(newVal),
audiochannelsValue: value
};
});
}
这将基于以前的状态生成一个字符串,并用/
分隔每个值。尚未对其进行测试,但应(按顺序)生成:
你能详细说明你的问题吗?我不理解您的用例,也不理解您说它从下拉列表中消失是什么意思。@Chris我想让用户可以选择选项English/Skip/French/Skip(换句话说,他们可以多次选择Skip),当他们选择两次Skip选项时会发生什么?你想让计数器计算按下的次数吗?还解释所需的实现。在用户选择English/Skip/French/Skip之后,您能给我所需的新状态吗?我将执行一个类似English/Skip/French/Skip的数据库插入(换句话说,它只需将所有下拉选择的项目转换为字符串。下拉菜单中不显示任何内容。知道如何保持下拉菜单的当前视图吗?@Jay266哦,对不起,忘记了。请尝试我上面修改的示例。)
English
English/Skip
English/Skip/French
English/Skip/French/Skip