如何检查多选输入表单中的哪些选项是从ReactStrap中选择的

Question

我正在创建一个表单，该表单可以选择在

multiselect

输入中选择多个值，用于过滤搜索的不同选项。我正在使用

ReactStraps Form

组件。

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>

我似乎无法在

option

中找到任何值来检查当前是否已单击，这引出了我的下一个问题。

reactstrap

和

bootstrap

几乎仅用于外观和非常基本的功能吗？如果是这样，我是否应该在我的

input

中设置功能来跟踪它是否已被单击？

Answer 1

您应该处理“onChange”事件并设置值。例如：

<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>

并且您应该设置事件

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 });
 }

Answer 2

所以我改用不同的组件，但我认为两者的答案是相同的。本质上，在组件上，您将 onChange 事件设置为某个函数来处理更改，并在该函数上传递事件参数。事件参数将是选择的任何选项。

代码示例：

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>
        )
}

}