如何在 React.js 中不使用 onSubmit 清除输入字段
Posted
技术标签:
【中文标题】如何在 React.js 中不使用 onSubmit 清除输入字段【英文标题】:How to clear input field without using onSubmit in React.js 【发布时间】:2021-09-03 19:54:20 【问题描述】:我尝试通过为输入字段赋予 value 属性来重置输入字段,但它给出了如下错误: value 只能与 onChange 一起使用。 有什么方法可以重置输入框吗?
import useState from "react";
import List from "./List";
import "./Form.css";
import iconSun from "../images/icon-sun.svg";
const Form = (props) =>
const [input, setInput] =useState("")
const inputHandler = (event) =>
setInput(event.target.value)
if (event.key === "Enter")
const data =
name: input,
id: Math.floor(Math.random().toFixed(4) * 10000).toString()
props.eventHandler(data)
setInput("")
;
return (
<div className="toform">
<div className="heading">
<h1>Todo</h1>
<img src=iconSun className="imgs" />
<input type="text" onKeyPress=inputHandler value=input />
</div>
<List lists=props.name />
</div>
);
;
export default Form;
【问题讨论】:
【参考方案1】:这可能意味着您需要在输入中添加一个onChange
属性,该属性将监听input
值的变化以更新值
<input
type="text"
onKeyPress=inputHandler
value=input
onChange=(e) => setInput(e.target.value)
/>
【讨论】:
感谢您的帮助。这一项有效,但需要在 inputHandler 函数中添加另一段代码才能重置输入字段。将 onChange 设置为 event.target.value 后,我们需要在 inputHandler 中添加 setInput("") 来完全重置 const inputHandler = (event) => if (event.key === "Enter") const data = name: input, id: Math.floor(Math.random().toFixed(4) * 10000).toString() props.eventHandler(data) setInput("") 像这样。谢谢以上是关于如何在 React.js 中不使用 onSubmit 清除输入字段的主要内容,如果未能解决你的问题,请参考以下文章
命名路径在 react-router-dom react js 中不起作用