Question

我尝试在react组件的render()功能中使用此表单，但live search选项不起作用，请帮我解决此问题，

<form className="container" id="input-validate" onSubmit={this.onSubmit} noValidate>
  <div className="col-xs-5 selectContainer">
    <select required data-live-search="true" name="patient_id" className="form-control" value={this.state.value} onChange={this.onChange}>
      <option value="">select patient</option>
      {patient_data_all.map((item) =>
        <option key={item._id} value={item._id}>{item.patient_name}</option>
      )}
    </select>
    <span id='message'></span>
  </div>
  <input type="submit" className="btn btn-info btn-block mt-4" />
</form>

的onChange：

onChange(e) {
    this.setState({ [e.target.name]: e.target.value })
  }

Answer 1

 <select
   required
   data-live-search="true"
   name="patient_id" 
   className="form-control"
   value={this.state.value}
   onChange={this.onChange}
 >
   <option value="">select patient</option>
    {patient_data_all.map((item) =>
        <option key={item._id} value={item._id}>{item.patient_name}</option>
    )}
 </select>




onChange(e) {
    this.setState({ [e.target.name]: e.target.value })
  }

您可以在此处设置选择框的值this.state.value并将新值设置为e.target.name即patient_id，因此如果您更改this.state.value，则会反映出当前值。修改你的onChange处理程序。

onChange(e) {
        this.setState({value: e.target.value })
    }

bootstrap 4下拉，搜索无效

1 个答案: