OnChange in React не фиксирует последний символ текста

Это моя функция рендеринга:

  render: function() {
    return  <div className="input-group search-box">
              <input
                onChange={this.handleTextChange}
                type="text"
                value={this.state.text}
                className="form-control search-item" />
              <span className="input-group-btn"></span>
        </div>
   }

и у меня есть это как обработчик событий:

   handleTextChange: function(event) {
     console.log(event.target.value);
     this.setState({
       text: event.target.value
     });
   }

Проблема заключается в том, что когда я "сохраняю" элемент или консоль .log печатает вывод, последний символ отсутствует - например, если я вхожу "первым", я буду распечатывать "firs" и должно быть другое ключевое событие для захвата последнего символа. Я пробовал onKeyUp - который не позволяет мне вводить что-либо, и я также пробовал onKeyDown и onKeyPress, которые ничего не выводят. Что здесь происходит и почему? и как я могу отобразить последнего персонажа?

Ответы

Ответ 1

Когда вы регистрируете состояние? Помните, что setState является асинхронным, поэтому, если вы хотите распечатать новое состояние, вам нужно использовать параметр обратного вызова. Представьте себе этот компонент:

let Comp = React.createClass({
  getInitialState() {
    return { text: "abc" };
  },

  render() {
    return (
      <div>
        <input type="text" value={this.state.text}
               onChange={this.handleChange} />
        <button onClick={this.printValue}>Print Value</button>
      </div>
    );
  },

  handleChange(event) {
    console.log("Value from event:", event.target.value);

    this.setState({
      text: event.target.value
    }, () => {
      console.log("New state in ASYNC callback:", this.state.text);
    });

    console.log("New state DIRECTLY after setState:", this.state.text);
  },

  printValue() {
    console.log("Current value:", this.state.text);
  }
});

Ввод a d в конце ввода приведет к тому, что на консоль будут записаны следующие файлы:

Value from event: abcd
New state DIRECTLY after setState: abc
New state in ASYNC callback: abcd

Обратите внимание, что в среднем значении отсутствует последний символ. Вот рабочий пример.

Ответ 2

Поскольку функция setState() в асинхронном режиме, я использовал await. Я добился этого с помощью async и await, вот мой код

render: function() {
    return  <div className="input-group search-box">
              <input
                onChange={(e) => {this.handleTextChange(e)}}
                type="text"
                value={this.state.text}
                className="form-control search-item" />
              <span className="input-group-btn"></span>
        </div>
   }

Функция handleTextCahnge:

handleTextChange = async function(event) {

     await this.setState({text: event.target.value});
     console.log(this.state.text);
   }

Ответ 3

Функция setState() в асинхронном режиме. Без использования обратного вызова вы можете использовать другую вспомогательную переменную для хранения и немедленного использования обновленного значения. Как:

export default class My_class extends Component{
constructor(props)
{
super(props):
this.state={
text:"",
};
this.text="";
}
 render: function() {
    return  <div className="input-group search-box">
              <input
                onChange={this.handleTextChange}
                type="text"
                value={this.state.text}
                className="form-control search-item" />
              <span className="input-group-btn"></span>
        </div>
   }

handleTextChange: function(event) {
     console.log(event.target.value);
     this.text = event.target.value;
     this.setState({
      text: event.target.value
     });
   }

Вы получите обновленное значение в переменной this.text немедленно. Но вы должны использовать this.state.text для отображения текста в вашем пользовательском интерфейсе.