React useState:如何使用onChange作为输入并使用OnClick作为按钮来更新我的useState

Question

我正在尝试更新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>
);
}

Answer 1

这里可能需要两个独立的状态，

1. 保持当前过滤器的状态

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 })
};

Answer 2

您的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={(e) => setFilter({ name: e.target.value })}