выпадающий список начальной загрузки 4 с поиском не работает в реакции - PullRequest
0 голосов
/ 09 мая 2018

Я пытался использовать эту форму в функции react компонента *1001*, но опция 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 })
  }

1 Ответ

0 голосов
/ 09 мая 2018
 <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 })
    }
...