时间戳

首页 > 解决方案 > 引导多选：默认值和 onChange 不起作用

javascript - 引导多选：默认值和 onChange 不起作用

问题描述

我已经进行了大量搜索，但无法使其正常工作。看起来很简单。顺便说一句，我正在使用 Bootstrap-multiselect。

class MyProject extends React.Component {
constructor(props) {
    super(props);
    this.state = { searchForm: { status: ["VALUE2","VALUE4"], otherprops: "blah" }, otherStates: "blah"};
    }

//blah blah
render() {
return (
<select id="example-multiple-selected" multiple="multiple" defaultValue={this.state.searchForm.status} onChange={(event) => this.state.searchForm.status = event.target.value}>
    <option value="VALUE1">VALUE1</option>
    <option value="VALUE2">VALUE2</option>
    <option value="VALUE3">VALUE3</option>
    <option value="VALUE4">VALUE4</option>
    <option value="VALUE5">VALUE5</option>
    <option value="VALUE6">VALUE6</option>
    <option value="VALUE7">VALUE7</option>
    <option value="VALUE8">VALUE8</option>
</select>
)
}}

问题

  1. 未选择默认值（VALUE2 和 VALUE4）；

  2. 更改所选选项时似乎没有任何反应

编辑

似乎每个人都在谈论我没有正确设置状态的事实，我绝对同意。这是我犯的一个愚蠢的错误。但是，我面临的根本问题仍然存在：

  1. 正如我所提到的，默认值不会被填充；

  2. onStatusChanged 函数根本没有被触发。我将调试点放在此函数中，但是当我更改所选选项时根本没有达到调试点。

    onStatusChanged = (e) => { 让搜索 = this.state.searchForm; search.status = e.target.selectedOptions; this.setState({ searchForm: search }) }

<select id="example-multiple-selected" multiple="multiple" defaultValue={this.state.searchForm.status} onChange={this.onStatusChanged}>

编辑 2

最新代码：

class MyProject extends React.Component {
    constructor(props) {
        super(props);
        this.state = { searchForm: { status: ["VALUE2","VALUE4"], otherprops: "blah" }, otherStates: "blah"};
        this.onStatusChanged = this.onStatusChanged.bind(this);
        }

    //blah blah
    onStatusChanged = (e) => {
        let search = this.state.searchForm;
        search.status = e.target.selectedOptions;
        this.setState({
            searchForm: search
        })
    }

    render() {
    return (
    <select id="example-multiple-selected" multiple="multiple" value={this.state.searchForm.status} onChange={this.onStatusChanged}>
        <option value="VALUE1">VALUE1</option>
        <option value="VALUE2">VALUE2</option>
        <option value="VALUE3">VALUE3</option>
        <option value="VALUE4">VALUE4</option>
        <option value="VALUE5">VALUE5</option>
        <option value="VALUE6">VALUE6</option>
        <option value="VALUE7">VALUE7</option>
        <option value="VALUE8">VALUE8</option>
    </select>
    )
}}

重申我面临的问题：

  1. 正如我所提到的，默认值不会被填充；

  2. onStatusChanged 函数根本没有被触发。我将调试点放在此函数中，但是当我更改所选选项时根本没有达到调试点。似乎未检测到 onChange。

顺便说一句，如果有帮助，我正在使用Bootstrap-multiselect插件。

标签： javascriptreactjsbootstrap-multiselect

解决方案

您不能只显式设置状态（期望在构造函数中）。在事件处理程序中（更改时），您必须使用 this.setState(...)。此外，您应该使用“selectedOptions”属性。

onStatusChanged(event) {
  let searchForm = this.state.searchForm;
  searchForm.status = event.target.selectedOptions;
  this.setState({
    searchForm:searchForm
  });
}

....

<select id="example-multiple-selected" multiple="multiple" value={this.state.searchForm.status} onChange={this.onStatusChanged.bind(this)}>

如果你要传入一个函数，那么你需要绑定“this”以便它可以设置状态（如果你需要在函数中访问'this'，你只需要执行bind（this））。

这是它在 JS Fiddle 上的工作https://jsfiddle.net/69z2wepo/184044/

推荐阅读