[英]How to check which options in a multi-select input form are selected from ReactStrap
I'm creating a form that has the option to select multiple values within a multiselect
input, for filtering different options for a search.我正在创建一个表单,该表单可以选择在multiselect
输入中选择多个值,以过滤不同的搜索选项。 I'm using ReactStraps Form
component .我正在使用ReactStraps Form
组件。
The multiselect
option is made up of an Input
component, with multiple Option
components like so: multiselect
选选项由一个Input
组件和多个Option
组件组成,如下所示:
<Input type="select" name="selectMulti" id="exampleSelectMulti" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Input>
I can't seem to find any value within the option
to check if it's currently clicked, which leads me to my next question.我似乎无法在option
中找到任何值来检查它当前是否被单击,这引出了我的下一个问题。 Are reactstrap
and bootstrap
meant almost solely for looks and very basic functionality? reactstrap
和bootstrap
是否几乎仅用于外观和非常基本的功能? If so, should I be setting up the functionality within my input
to handle keeping track of whether it has been clicked or not?如果是这样,我是否应该在我的input
中设置功能来处理跟踪它是否被点击?
you should handel in the 'onChange' event and set value.您应该处理“onChange”事件并设置值。 for example:例如:
<Input type="select" name="selectMulti" id="exampleSelect" multiple value={this.state.StatusFilter} onChange={(event) => {this.onChangeMulti(event);}} >
<option value='Val1'>Val1</option>
<option value='Val2'>Val2</option>
</Input1>
and on event you should set在事件中你应该设置
onChangeMulti = (event) => {
let opts = [], opt;
for (let i = 0, len = event.target.options.length; i < len; i++) {
opt = event.target.options[i];
if (opt.selected) {
opts.push(opt.value);
}
}
this.setState({ StatusFilter: opts });
}
So I switched to using a different component, but I assume that answer is the same for both.所以我转而使用不同的组件,但我认为两者的答案是相同的。 Essentially on the component, you set the onChange event to some function for handling your change and on that function pass in an event parameter.基本上在组件上,您将 onChange 事件设置为某个函数来处理您的更改,并在该函数上传递一个事件参数。 The event parameter will be whatever options are selected.事件参数将是选择的任何选项。
Code Example:代码示例:
class FilterForm extends Component {
constructor(props) {
super(props);
this.state={
filters:[],
choiceValue:''
};
this.handleChange = this.handleChange.bind(this);
}
componentDidMount(){
var filters=[];
this.props.filters.forEach(function(item){
filters.push({value:item,label:item});
});
this.setState({filters:filters.slice()});
}
handleChange(event){
//This will print all selected elements
event.forEach(function(item){
console.log(item)
})
}
render() {
return (
<div>
{<Select isMulti options={this.state.filters} onChange={this.handleChange}/>}
</div>
)
}
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.