React中onChange读取input值时最后字符无法捕获的问题求助

原因分析 #

React的useState更新是异步批量处理的——当你调用setEnteredFlight(event.target.value)后，enteredFlight并不会立刻更新为最新值。所以你在flightInputHandler里立刻console.log(enteredFlight)和调用props.flightInput(enteredFlight)时，拿到的还是更新前的旧状态，这就导致输入最后一个字符时，打印和传递的都是少一个字符的值。

解决方案 #

方案1：直接使用event.target.value（推荐，实时同步） #

输入框的event.target.value就是当前的最新输入值，直接用它来打印和传递给父组件即可，不需要依赖还没更新的enteredFlight状态：

import './SearchFlights.css';
import { useState } from 'react';

const SearchFlights = (props) => {
  const [enteredFlight, setEnteredFlight] = useState('');

  const flightInputHandler = (event) => {
    const latestValue = event.target.value;
    setEnteredFlight(latestValue);
    console.log(latestValue); // 直接打印最新值
    props.flightInput(latestValue); // 传递最新值给父组件
  };

  return (
    <>
      <div className="container">
        <h1>Search Flights</h1>
        <form>
          <label>Enter a flight number</label>
          <input
            type="text"
            onChange={flightInputHandler}
            value={enteredFlight} {/* 加上value绑定，变成受控组件，避免状态不一致 */}
          />
        </form>
      </div>
    </>
  );
};
export default SearchFlights;

方案2：用useEffect监听状态变化 #

如果需要在enteredFlight状态真正更新完成后再执行操作，可以用useEffect钩子监听状态变化：

import './SearchFlights.css';
import { useState, useEffect } from 'react';

const SearchFlights = (props) => {
  const [enteredFlight, setEnteredFlight] = useState('');

  const flightInputHandler = (event) => {
    setEnteredFlight(event.target.value);
  };

  // 当enteredFlight更新时自动执行
  useEffect(() => {
    console.log(enteredFlight);
    props.flightInput(enteredFlight);
  }, [enteredFlight, props.flightInput]); // 依赖数组：状态变化时触发

  return (
    <>
      <div className="container">
        <h1>Search Flights</h1>
        <form>
          <label>Enter a flight number</label>
          <input
            type="text"
            onChange={flightInputHandler}
            value={enteredFlight}
          />
        </form>
      </div>
    </>
  );
};
export default SearchFlights;

这种方式适合需要基于更新后的状态做异步请求、复杂计算等后续逻辑的场景。

内容的提问来源于stack exchange，提问作者KapteinKonyn