如何在我使用纯React.js挂钩提交表单后重置我的输入字段，没有库

Question

我试图在提交表单后重置输入字段，只使用React.js，使用React本身的钩子。

这是我的代码：

import React, { useState } from 'react';
const Searchbar = (props) => {
const { updateSelectedCity } = props;
const [newCity, setCity] = useState("");
const handleChange = (e) => {
setCity(e.target.value);
}
const handleSubmit = (e) => {
e.preventDefault();
updateSelectedCity(newCity);
console.log(newCity);
}

return (
<div>
<form onSubmit={handleSubmit}>
<input name="cityName" placeholder={placeholder} onChange={handleChange} />
<button type="submit">Check Weather</button>
</form>
</div>
)
};
export default Searchbar;

为了实现这一点，我需要添加什么？我需要使用useEffect吗？或者有没有什么方法可以在不使用外部库的情况下做到这一点？

谢谢你的帮助！

Answer 1

设置<input>以从状态获取其值

<input name="cityName" placeholder={placeholder} onChange={handleChange} value={newCity} />

在处理提交事件后只更新状态：

const handleSubmit = (e) => {
e.preventDefault();
updateSelectedCity(newCity);
console.log(newCity);
setCity("");    //   <--- here
}