实时搜索未在 bootstrap-select 中初始化

Question

我使用 React.js 并希望将 bootstrap-select 与 live search 功能一起使用，但 bootstrap-select 初始化时没有实时搜索功能。

jsfiddle

var SelectPicker = React.createClass({

  getInitialState: function () {
    return {
      value: optionItems[0]
    }
  },

  _onChange: function(){
    console.log('change');
  },

  render: function() {

  var options = this.props.items.map((object, i) =>
    <option key={i} value={object}>
    {object}
    </option>
  );

    return (
      <div className="selectWrapper">
      <label htmlFor={"selectNum"}>Number</label>
      <select id={"selectNum"}
      ref="selectPicker"
      className="form-control selectPicker"
      data-live-search="true"
      onChange={this._onChange}
      value={this.state.value}>
      {options}
      </select>
      </div>
    );
  }
});

var optionItems = ['1', '2', '3', '4', '5', '6'];

ReactDOM.render(
  <SelectPicker items={optionItems} />,
  document.getElementById('container')
);

如果我初始化 select-picker without react 它可以正常工作。

Answer 1

你需要初始化selectpicker，你可以像这样在componentDidMount中做

componentDidMount: function () {
  $(this.refs.selectPicker).selectpicker({
    liveSearch: true
  });
},

Example