React中handleChange处理表单输入时丢失最后一个字符该如何解决？

问题原因 #

• React 状态更新是异步执行的，调用setTools后，当前函数作用域内的tools变量不会立刻更新为新值，你后续执行props.setEditValues(tools)和必填校验时，读取的都是上一次渲染的旧状态，因此会出现输入值滞后一位、校验时机异常的问题。

修复方案 #

方案1：直接基于本次输入值构造新状态处理逻辑 #

在handleChange内先构造完整的新状态对象，再用它执行状态更新、传值给父组件和校验逻辑，避免依赖旧的状态变量：

const [ tools, setTools ] = useState({
    name: props.values.name || '',
    description: props.values.description || '',
    notes: props.values.notes || '',
    downloadLink: props.values.downloadLink
});

const handleChange = (e) => {
    const { name, value } = e.target;
    // 先构造最新的状态对象
    const newTools = {
        ...tools,
        [name]: value
    };
    setTools(newTools);
    // 用新构造的对象传值和校验
    props.setEditValues(newTools);
    if (!newTools.name || !newTools.description || !newTools.downloadLink) {
        props.setError(true);
    } else {
        props.setError(false);
    }
};

// TextField 组件无需修改
<TextField
    error={props.error}
    fullWidth
    label='Name'
    name='name'
    onChange={handleChange}
    value={tools.name}
    variant='outlined'
/>

方案2：通过 useEffect 监听状态变化执行后续逻辑 #

如果你的项目中存在多处修改tools状态的逻辑，可以把同步到父组件、校验的逻辑放到useEffect中，只要tools变化就自动执行，避免多处重复写逻辑：

const [ tools, setTools ] = useState({
    name: props.values.name || '',
    description: props.values.description || '',
    notes: props.values.notes || '',
    downloadLink: props.values.downloadLink
});

// 监听tools变化，自动同步到父组件并校验
useEffect(() => {
    props.setEditValues(tools);
    props.setError(!tools.name || !tools.description || !tools.downloadLink);
}, [tools, props]);

const handleChange = (e) => {
    const { name, value } = e.target;
    setTools((prevState) => ({
        ...prevState,
        [name]: value 
    }));
};

// TextField 组件无需修改
<TextField
    error={props.error}
    fullWidth
    label='Name'
    name='name'
    onChange={handleChange}
    value={tools.name}
    variant='outlined'
/>

两种方案都可以解决输入值滞后、校验异常的问题，可根据你的实际业务场景选择。

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