你什么时候记录状态？请记住，这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);
  }
});

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

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

请注意，中间值缺少最后一个字符。这是一个工作示例。

由于异步中的 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);
   }

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

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