Как получить текущее выбранное значение из выпадающего списка в response-bootstrap-typeahead?

Question

Я пытаюсь использовать react-bootstrap-typeahead в моем заявлении. Я использую пример, показанный здесь https://ericgio.github.io/react-bootstrap-typeahead/. это компонент

<Typeahead
 labelKey={(option) => `${option.firstName} ${option.lastName}`}
 options={[
 {firstName: 'Art', lastName: 'Blakey'},
 {firstName: 'John', lastName: 'Coltrane'},
 {firstName: 'Miles', lastName: 'Davis'},
 {firstName: 'Herbie', lastName: 'Hancock'},
 {firstName: 'Charlie', lastName: 'Parker'},
 {firstName: 'Tony', lastName: 'Williams'},
 ]}

 onInputChange={this.handleInputChange}
 onKeyDown={ this._handleChange}
 value={this.state.value}
 placeholder="Who's the coolest cat?"
/>

это функция смены ручки

_handleChange = (e) => {
  console.log("value",e.target.value)
}

когда я пытаюсь утешить логаризованное значение, оно показывает ранее выбранное значение. Я хочу получить текущее выбранное значение. Как я могу получить текущее выбранное значение.

Answer 1

Кажется, что это ожидаемое поведение, поскольку событие onKeyDown срабатывает до изменения входа и, таким образом, event.target.value возвращает предыдущее значение. Чтобы вернуть выбранное значение, используйте

• onChange - вызывается при изменении входного значения и (или)
• onInputChange - вызывается при изменении входного значения. Получает строковое значение ввода, а также исходное событие.

события вместо.

Пример

class Example extends React.Component {
  state = {};

  handleInputChange(input, e) {
    console.log("value", input)
  }

  handleChange(selectedOptions) {
    console.log(selectedOptions);
  }

  render() {
    return (
      <Typeahead
        id="typeahead"
        labelKey={option => `${option.firstName} ${option.lastName}`}
        options={[
          { id: 1, firstName: "Art", lastName: "Blakey" },
          { id: 2, firstName: "John", lastName: "Coltrane" },
          { id: 3, firstName: "Miles", lastName: "Davis" },
          { id: 4, firstName: "Herbie", lastName: "Hancock" },
          { id: 5, firstName: "Charlie", lastName: "Parker" },
          { id: 6, firstName: "Tony", lastName: "Williams" }
        ]}
        placeholder="Who's the coolest cat?"
        onInputChange={this.handleInputChange}
        onChange={this.handleChange}
      />
    );
  }
}

Демо