reactjs 使用useState()填充Input无法正常工作

sg24os4d 于 2023-04-05 发布在 React

关注(0)|答案(4)|浏览(126)

我试图处理一个在每次输入更改后触发的事件，这将是一个类似于搜索建议的事件。问题是，即使调用了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”。我的错误在于简化了组件来发布问题，因为问题不在上面提到的代码中。
useForm中的属性“register”与“onChange”冲突。
另外，“event.currentTarget”应该是“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>}
/>

reactjs

来源：https://stackoverflow.com/questions/75907806/using-usestate-to-populate-input-not-working-properly

4条答案

按热度按时间

vshtjzan1#

这些是我可以建议的改变

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

赞(0）回复(0）举报 2023-04-05

wh6knrhe2#

import React, {useState} from "react" // you must import useState from react

const [value, setValue] = useState(""); // difine 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

赞(0）回复(0）举报 2023-04-05

velaa5lx3#

我的一个同事发现问题出在useForm的一个属性“... register”上。这个“register”已经嵌入了一个onChange，所以两个“onChange”有点相互冲突。
另一个问题是使用“event.currentTarget”而不是“www.example.com“，这个问题在答案中已经正确地提到event.target了。
我的错，没有显示所有的进口在这里的例子。

赞(0）回复(0）举报 2023-04-05

tsm1rwdh4#

试试这个

<Input
  value={value} 
  onChange={event => setValue(event.target.value)}
/>

赞(0）回复(0）举报 2023-04-05

我来回答

reactjs 使用useState()填充Input无法正常工作

4条答案

相关问题

热门标签

最新问答