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

Question

我正在创建一个表单，该表单可以选择在 multiselect 输入中 select 多个值，以过滤搜索的不同选项。我正在使用 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 });
}

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

How to check which options in a multi-select input form are selected from ReactStrap

reactjs

reactstrap