Событие ReactJS OnKeyUp не получает значение на управляемом входе

Question

Я создаю поисковый компонент ReactJS для фильтрации данных через поиск.

Идея состоит в том, что пользователь вводит слово, буква за буквой, и система будет фильтровать все регистры, содержащие это слово. Базовый компонент подробно описан ниже:

class SearchInput extends Component {
    static propTypes = {
        onKeyUp: PropTypes.func,
        placeHolder: PropTypes.string,
        value: PropTypes.string
    };

state = {
    searchText: ""
};

handleKeyUp = event => {

    console.log(event.target.value) // <== No result. Always empty

    let newSearchText = event.target.value;
    this.setState({ searchText: newSearchText });
    if (this.props.onKeyUp) this.props.onKeyUp(newSearchText);
};

render() {
    console.log(this.state.searchText) // <== Always empty

    return (
        <div className="search-input">
            <div className="search-input-icon">
                <Icon name="faSearch" />
            </div>
            <input
                autoFocus="true" 
                type="text"
                onKeyUp={this.handleKeyUp}
                placeholder={this.props.placeHolder}
                value={this.state.searchText}
            />
        </div>
    );
}

Я не получаю значение нажатой клавиши в обработчике событий handleKeyUp.

Это работает, если я пропускаю value={this.state.searchText} (неуправляемый) из кода, но мне нужен способ установить searchText снаружи компонента (инициализация, выбор другого компонента и т. Д.).

Почему я не получаю данные event.target.value в моем обработчике? Как это исправить?

Answer 1

Я почти уверен, что вам нужно прослушать событие onChange в поле ввода, чтобы получить обновленное целевое значение.просто измените

<input onKeyUp={this.handleKeyUp} />

на

<input onChange={this.handleKeyUp} />

Answer 2

Попробуйте использовать event.key вместо этого.

event.target.value просто указывает на ваш this.state.searchText, который еще не был установлен.

Answer 3

кажется, вы забыли связать функцию с конструктором:

class SearchInput extends Component {
  constructor(props) {
    super(props);
    this.handleKeyUp = this.handleKeyUp.bind(this);
  }

  //... any code here

  handleKeyUp = event => {
    console.log(event.target.value);
  }

  render() {
    //... any code here

    <input
      autoFocus="true" 
      type="text"
      onKeyUp={this.handleKeyUp}
      placeholder={this.props.placeHolder}
      value={this.state.searchText}
    />
  }
}

Answer 4

Используйте это:

let newSearchText = event.target.getAttribute('value')