Question

我正在创建一个表单，该表单可以选择在multiselect输入中选择多个值，以过滤搜索的不同选项。我正在使用ReactStraps Form component。

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事件设置为用于处理更改的某个函数，并在该函数上传递事件参数。事件参数将是选择的任何选项。

代码示例：

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

}

Answer 2

您应该处理“ 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 });
}

如何检查从ReactStrap中选择了多选输入形式中的哪些选项

2 个答案: