handle change 函数有问题，遗漏一个字符

Question

所以 handle change 方法有效，但总是忘记我的字符串的最后一个字符（当我键入“test”时它保存“tes”），即使我正在测试以查看是否有错误的值函数，仅在还剩一个字符时才拾取错误。任何建议都会有所帮助。

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;
        setTools((prevState) => ({
            ...prevState,
            [name]: value 
        }));
        props.setEditValues(tools);
        if (!tools.name || !tools.description || !tools.downloadLink) {
            props.setError(true);
        }
        else {
            props.setError(false);
        }
        

    };

<TextField
                            error={props.error}
                            fullWidth
                            label='Name'
                            name='name'
                            onChange={handleChange}
                            value={tools.name}
                            variant='outlined'
                        />

Answer 1

使用 onKeyUp 而不是 onChange：

<TextField
  error={props.error}
  fullWidth
  label='Name'
  name='name'
  onKeyUp={handleChange}
  value={tools.name}
  variant='outlined'
/>

Answer 2

问题是在您调用 setState.

后 tools 在 handleChange 函数的范围内不是最新的

调用setState确实更新组件状态中的tools值，但是handleChange函数需要重新创建 所以它会有更新后的值。

解决该问题的一种方法是使用 useEffect 挂钩：

  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;
    setTools((prevState) => ({
      ...prevState,
      [name]: value
    }));
  };

  useEffect(() => {
    props.setEditValues(tools);
    if (!tools.name || !tools.description || !tools.downloadLink) {
      props.setError(true);
    }
    else {
      props.setError(false);
    }
  }, [tools, props.setEditValues, props.setError]);

  <TextField
    error={props.error}
    fullWidth
    label='Name'
    name='name'
    onChange={handleChange}
    value={tools.name}
    variant='outlined'
  />

另一种方法是在 handleChange 函数范围内创建更新后的 tools 值，并将其用于设置组件状态和函数内部。

该函数看起来像这样，您不需要 useEffect:

  const handleChange = (e) => {
    const { name, value } = e.target;
    const nextTools = { ...tools, [name]: value };
    setTools(nextTools);
    props.setEditValues(nextTools);
    if (!nextTools.name || !nextTools.description || !nextTools.downloadLink) {
      props.setError(true);
    }
    else {
      props.setError(false);
    }
  };

handle change 函数有问题，遗漏一个字符

Having trouble with handle change function ,leaves one character out

forms

error-handling

event-handling

reactjs