尝试使用 React 中的钩子函数清除所有表单字段.将对象添加到 onClick 事件

Question

我在一个小的 React 项目项目中创建了以下钩子。 从 "react" 导入 { useState }

;

export default initialValue => {
const [name, setValue] = useState(initialValue);
const handleChange = e => {
setValue(e.target.value);
};
const reset = () => {
setValue("");
};
return [name, reset, handleChange];
};

现在在我的应用程序中.js我已经导入了钩子。 我有以下代码使用钩子来填充表单。

import React from "react";
import useInputHook from "../Hooks/useFormState";
function App() {
const [name, setName, resetName] = useInputHook("");
const [surname, setSurname, resetSurname] = useInputHook("");
const [email, setEmail, resetEmail] = useInputHook("");

我遇到的这个问题是在onClick事件上使用重置名称，重置姓氏和重置电子邮件。 以清除表单域。我得到以下error /src/components/App.jsx: Unexpected token, expected "..." (41:35)下面是表单的代码。

return (
<div className="container">
<h1>
Hello {name} {email}
</h1>
<h2>{email}</h2>
<input
onChange={setName}
type="text"
placeholder="What's your name?"
value={name}
/>
<input
onChange={setSurname}
type="text"
placeholder="What's your surname?"
value={surname}
/>
<input
onChange={setEmail}
type="text"
placeholder="What's your email?"
value={email}
/>
<button onClick={resetName} {resetSurname} {resetEmail}>Submit</button>
</div>
);
}

任何帮助将不胜感激。

Answer 1

您已导出为[value, reset function, change handler]

并作为[value, change handler, reset function]导入(顺序错误(

底部的重置按钮也应激活所有重置功能，如下所示：

<button onClick={()=>resetName();resetSurname();resetEmail();}>Submit</button>

• 如果您在按钮中像这样设置函数，它们将成为按钮的道具，并且在 onClick 触发时不会执行。 这是错误的：<button onClick={resetName} {resetSurname} {resetEmail}>Submit</button>

您可以尝试制作一个重置函数数组或使用 useEffect 清理功能。

快乐反应！