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是异步的，因此如果要打印 new 状态，则必须使用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将导致以下内容被记录到控制台：

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

请注意，中间值缺少最后一个字符。 Here's a working example

Answer 2

由于 React v.16.8，react hooks 很有帮助。我会推荐 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) }}
    />
);
};

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

异步中的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在你的UI中显示文本。

Answer 5

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 6

自 React v。16.8 起，您就可以使用react挂钩了。

[1] "Mezgebo Gk; Ymesel T;Tegegne G"

对我来说很好。

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

6 个答案: