如何檢查從 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>
        )
}

}