如何解决React useState:如何使用onChange作为输入并使用OnClick作为按钮来更新useState?
我正在尝试更新useState挂钩,但是对象返回空值。我尝试使用类似<input onChange={e => setFilter(name: e.target.value)} >
的方法,但是它在每次击键时都会提交,并且按钮没有意义,并且用户无法完全完成该值(仅复制和粘贴有效)。我在做什么错了?
export default function Search() {
const [filter,setFilter] = useState({ name: "Hungary" });
const { data,loading,error } = useQuery(GET_COUNTRY_INFO,{
variables: { filter },});
if (loading) {
return <Loader />;
}
if (error) return <p>Error</p>;
const userReq = {
name: ''
}
function onChangeHandler (e) {
const userReq = {name: e.target.value}
return userReq
};
const onClickHandler = (e) => {
setFilter(userReq)
}
return (
<div className="body">
<h1>
Get Information
<br /> about Countries!
</h1>
<div className="wrapper">
<input
className="search"
type="text"
id="search"
placeholder="Enter a Country"
onChange={onChangeHandler}
/>
<button className="submit" name="name" type="submit" onClick={onClickHandler}>
Search
</button>
{data?.Country?.[0] && <CountryInfo country={data?.Country[0]} />}
</div>
</div>
);
}
解决方法
您的setFilter错误,您正在使用:
setFilter(name: e.target.value)
,应为:
setFilter({ name: e.target.value });
因此,下面的代码应该可以工作,并且您不需要'userReq'
变量:
function onChangeHandler(e) {
setFilter({ name: e.target.value });
}
const onClickHandler = (e) => {
console.log(filter);
};
<input type="text" id="search" onChange={onChangeHandler} />
如果要onChange内联:
onChange={(e) => setFilter({ name: e.target.value })}
,
您可能想要在这里2个单独的状态,
-
保存当前过滤器的状态
-
保存当前用户输入的状态
,然后单击要与过滤器同步用户输入的按钮
查看您的代码,我认为您已经搞清楚了,因此只需将您的userReq
设置为状态就可以解决您的问题
基本更改
const userReq = {
name: ''
}
function onChangeHandler (e) {
const userReq = {name: e.target.value}
return userReq
};
对此
const [userReq,setUserReq] = useState({ name: '' })
function onChangeHandler (e) {
setUserReq({ name: e.target.value })
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。