React Input 组件它总是落后一步

Question

我遇到了一个小问题，你能帮忙吗？我正在尝试制作一个输入组件，但是当我在输入中输入内容时，它总是落后一步。 这是正确的方法吗？或者有什么方法可以制作输入组件？

这是 Input.js

import React, { useState } from 'react';

function Input(props) {
  const [value, setValue] = useState('');
  const { type, className, placeholder } = props;

  let handleChange = (e) => {
    setValue(e.target.value);
    props.onChange(value);
  };

  return (
    <>
      <div className='input-group mb-3'>
        <input
          onChange={handleChange}
          type={type == null ? 'text' : type}
          value={value == null ? '' : value}
          className={className == null ? 'form-control' : className}
          placeholder={placeholder == null ? '' : placeholder}
        />
      </div>
    </>
  );
}

export default Input;

这是 App.js

import React, { useState } from 'react';

import Input from './components/Input/Input';
function App(props) {
  const [d, setC] = useState([]);

  function onChangeValue(e) {
    setC(e);
    console.log(e);
  }

  return (
    <>
      <div className='container'>
        <div className='row'>
          <Input onChange={onChangeValue}></Input>
          <span>{d}</span>
        </div>
      </div>
    </>
  );
}

export default App;

Answer 1

您正试图在值实际设置之前访问它

 let handleChange = (e) => {
    setValue(e.target.value);
    props.onChange(value);
  };

值 setValue 不会立即将值设置为变量。它只会在下一次渲染时设置。

你可以这样做

let handleChange = (e) => {
    setValue(e.target.value);
    props.onChange(e.target.value);
  };

或者

（最佳方法）

 let handleChange = (e) => {
        setValue(e.target.value);
      };
 useEffect(()=> {
    props.onChange(value);
 }, [value])

因此，在每次更改值时，它都会调用您的 props 函数

Answer 2

这是因为您通过组件的状态设置了props.onChange，该状态仅在下一次渲染时可用

由于 Reactjs setState is batching 和异步，它会等待 evenHanlder 完成然后更新状态。

如果您希望它立即反映输入的更改，请使用输入本身的值，如下所示：

let handleChange = (e) => {
  setValue(e.target.value);
  props.onChange(e.target.value);  //<-- Use e.target.vale instead of value
};

工作示例：