Bootstrap-multiselect默认值不生效且onChange事件无响应问题

Bootstrap-multiselect是基于jQuery的UI插件，它会将原生的<select>元素隐藏或替换为自定义的HTML结构，所以你绑定在原生select上的value和onChange完全不会生效——用户实际交互的根本不是那个原生select了。

我们需要结合React的生命周期，手动和Bootstrap-multiselect的API交互，而非依赖React的原生表单绑定：

1. 正确初始化插件 #

在componentDidMount中调用插件的初始化方法，同时绑定插件自身的onChange回调，用来同步选中状态到React的state。

2. 同步React状态到插件 #

当React的state更新时（比如初始默认值），需要调用插件的API来更新选中项，而非依赖React的value属性。

3. 遵守React状态规范 #

处理状态更新时，要对searchForm做浅拷贝，不要直接修改this.state里的对象，避免触发异常。

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

  componentDidMount() {
    const $select = $("#example-multiple-selected");
    // 初始化Bootstrap-multiselect插件
    $select.multiselect({
      // 使用插件自带的onChange回调监听选中变化
      onChange: (option, checked) => {
        this.updateSelectStatus();
      }
    });
    // 初始化时同步state中的默认选中值
    this.setSelectFromState();
  }

  componentDidUpdate(prevProps, prevState) {
    // 当state里的status变化时，同步更新插件的选中状态
    if (prevState.searchForm.status !== this.state.searchForm.status) {
      this.setSelectFromState();
    }
  }

  // 把React state的选中值同步到插件
  setSelectFromState() {
    const $select = $("#example-multiple-selected");
    // 先清空所有选中项（第二个参数false表示不触发onChange）
    $select.multiselect('deselectAll', false);
    // 选中state中指定的选项
    $select.multiselect('select', this.state.searchForm.status);
    // 刷新插件的按钮文本，确保显示正确的选中内容
    $select.multiselect('updateButtonText');
  }

  // 把插件的选中值同步到React state
  updateSelectStatus() {
    const $select = $("#example-multiple-selected");
    // 通过插件API获取当前选中的value数组
    const selectedValues = $select.multiselect('getSelected')
      .map((option) => $(option).val())
      .get();
    // 浅拷贝searchForm，遵守React不可变状态原则
    const updatedSearchForm = {
      ...this.state.searchForm,
      status: selectedValues
    };
    // 更新state
    this.setState({ searchForm: updatedSearchForm });
  }

  render() {
    return (
      <select id="example-multiple-selected" multiple="multiple">
        <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>
    );
  }
}

• 移除了React原生的value和onChange绑定：因为原生select已被插件接管，这些绑定完全无效；
• 用componentDidMount初始化插件：确保DOM渲染完成后才能正确找到目标select元素；
• 用componentDidUpdate同步状态：当state的选中值变化时，主动调用插件API更新UI；
• 依赖插件API获取选中值：不再使用event.target.value，因为原生select的事件不会被触发；
• 浅拷贝状态对象：严格遵循React的不可变状态规则，避免状态更新异常。

内容的提问来源于stack exchange，提问作者xzk