React Input 组件它总是落后一步

Posted 2023-02-23

【中文标题】React Input 组件它总是落后一步

【英文标题】：React Input component it always comes one step behind

【发布时间】：2021-11-10 15:06:52

【问题描述】：

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

这是 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;

【问题讨论】：

这能回答你的问题吗？ useState set method not reflecting change immediately

【参考方案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 函数

【讨论】：

这个黄色错误是什么意思？ React Hook useEffect 缺少依赖项：'props'。包括它或删除依赖数组。但是，当 any 道具发生变化时，“道具”会发生变化，因此首选的解决方法是在 useEffect 调用之外解构“道具”对象，并在 useEffect.eslintreact-hooks/exhaustive 中引用那些特定的道具-deps

【参考方案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
;

工作示例：

【讨论】：

谢谢:) 这会起作用，但这是正确的方法吗？或者有什么方法可以制作输入组件？

在您的情况下，这是正确的方法，我不确定您要在组件上进一步实现什么，但是如果它是纯 Input 组件，则直接传递 onClick 道具没有自己的状态。

这意味着如果你希望它成为一个纯粹的 Input 组件，你不需要在 Input 组件中添加另一个状态。只有父组件上的一个状态是好的。

是的，如果你有时间，我想要纯粹的输入组件，你能举个例子吗？

是的，我已经在代码框里更新了。很奇怪，你只需要删除子组件中的所有处理程序和状态。看看它是否符合您的需求。