使用useState()填充输入不能正常工作

Question

我正在尝试处理每次更改输入后触发的事件，这将是类似于搜索建议的事情。问题是，即使调用了setValue函数并且输入使用该值来填充自己，它的值也会被重新加载为空，而不是输入的值。因此，我在输入(以及useState值)中看到的唯一数据是键入的最后一个字符。

我可能在Next/React中钩子的工作方式上犯了一个错误，但我不知道它是什么。

忘记输入值更改后我想做什么，这是我试图使用的代码，用于将数据保存在输入中，并将其存储在useState中。也许还有其他的解决方案，但让我困扰的是，这应该是简单的，但有些地方是错误的。

import { Input } from '@nextui-org/react';
... 
const [value, setValue] = useState<string>()
...
<Input
value={value} 
onChange={event => setValue(event.currentTarget.value)}
/>

编辑:

在我向我的同事展示了这个问题之后，他发现我使用的导入已经有一个"onChange"它是内置的。我很抱歉简化组件，在这里发布问题，因为问题不在上面提到的代码中。

属性"register"from useForm与"onChange"冲突。

还有"event. currentarget "应该是event.target"正如人们在这里提到的答案。

这是我应该发布的完整输入(这个不工作，但现在我知道为什么了):

import { useForm } from "react-hook-form";
...
const { register, handleSubmit } = useForm()
...
<Input
{...register("titleSearchTerms")}
css={{width: '100%'}}
size="lg"
bordered
onChange={event => setValue(event.currentTarget.value)}
labelRight={<MdSearch></MdSearch>}
/>

Answer 1

这些是我可以建议的改变

const [value, setValue] = useState(""); 
const inputHandler = (event) => {
setValue(event.target.value);
console.log(event.target.value);
};
<input type="text" value={value} onChange={inputHandler}/>{value}

Answer 2

import React, {useState} from "react" // you must import useState from react
const [value, setValue] = useState(""); // define the useState with initial value empty 

<input type="number" value={value} onChange={(e)=>setValue(e.target.value)}/> // when onChange event fired you set the event value to your useState use the setValue 

Answer 3

我的一个同事发现问题出在"…注册";这是一个来自useForm的属性。这个"register"已经嵌入了一个onChange，所以两个&;onChange&;我们之间有点矛盾

另一个在答案中正确提到的问题是使用了"event.currentTarget"而不是"event.target"。

我很抱歉在这里的例子中没有显示所有的导入。