如何检查从 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>
        )
}

}