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

因为你通过组件状态设置了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
};

工作示例：

Answer 2

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

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

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 函数

React Input 组件总是落后一步

React Input component it always comes one step behind

components

input

reactjs

react-hooks

use-state