Question

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

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')
);

如果我初始化选择选择器without react，它可以正常工作。

Answer 1

您需要初始化selectpicker，您可以在componentDidMount中执行此操作

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

Example

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

1 个答案: