React中的onChange不捕获文本的最后一个字符

Question

这是我的渲染功能:

  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
     });
   }

问题是当我"保存"一个项目,或者console.log打印输出时,最后一个字符丢失了 - 例如,如果我输入"first",我将打印出"firs",并且需要是捕获最后一个角色的另一个关键事件.我已经试过onKeyUp-这并不让我在任何类型的,我也试着onKeyDown和onKeyPress,其输出什么.这里发生了什么,为什么？我怎样才能让最后一个角色出现？

Answer 1

你什么时候登录州？请记住,这setState是异步的,因此如果要打印新状态,则必须使用callback参数.想象一下这个组件:

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);
  }
});

d在输入的末尾键入a 将导致以下内容记录到控制台:

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

请注意,中间值缺少最后一个字符.这是一个有效的例子.

Answer 2

import React, { useState, useEffect } from 'react';

const MyComponent = () => {

    const [userInput, setUserInput] = useState("");

    const changeHandler = (e) => {
        setUserInput(e.target.value);
    }

    useEffect(()=> {
        //here you will have correct value in userInput 
    },[userInput])

    return (
        <div>
             <input onChange={changeHandler} value={userInput}></input>
        </div>
    )
}

Answer 3

由于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);
   }

Answer 4

由于 React v.16.8 反应钩子可能会有所帮助。我会推荐 useState 和 useEffect。示例在 React Native 中，但它应该展示如何使用 useEffect。有关 useEffect 的更多信息：https ://reactjs.org/docs/hooks-effect.html

import React, {useState, useEffect} from 'react';
import { TextInput } from 'react-native';

export interface Props{}
 
const InformationInputs: React.FC<Props> = (props) => {
  const [textInputs, setTextInputs] = useState("");

  const handleValueChange = () => {
    console.log(textInputs);
  }

  useEffect(() => {
    handleValueChange();
  }, [textInputs]);

return (
    <TextInput
    placeholder={'Text'}
    onChangeText={(value: string) => { setTextInputs(value) }}
    />
);
};