我想要一個顯示“編輯”的按鈕以進入編輯模式，并（使用相同的按鈕）“保存”以提交表單。
我的問題是它已經在顯示按鈕文本“編輯”時按下按鈕提交表單。
鏈接到 codesandbox，包含以下代碼。
import "./styles.css";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { Button } from "@material-ui/core";
export default function App() {
//Setting up state
const [isEditing, setIsEditing] = useState(false);
//Handler for entering edit mode.
const handleEnterEditMode = () => {
setIsEditing(true);
console.log("Edit mode entered.");
};
//Handler that runs on form submission.
const handleSave = () => {
console.log("Form submitted.");
};
//Setting up some react-hook-forms variables according to their docs
const {
register,
formState: { errors },
handleSubmit,
control,
reset
} = useForm();
//In render:
return (
<div className="App">
<form noValidate onSubmit={handleSubmit(handleSave)}>
<Button
{...(isEditing ? { type: "submit" } : {})}
{...(!isEditing ? { onClick: handleEnterEditMode } : {})}
>
{!isEditing ? "Edit" : "Save"}
</Button>
</form>
</div>
);
}
uj5u.com熱心網友回復：
默認情況下，Form 元素內的按鈕將始終觸發 Submit 事件。你可以給按鈕一個“按鈕”的型別屬性，或者在 onClick 方法中添加一個 preventDefault() 來覆寫它。
uj5u.com熱心網友回復：
試試這個方法：
< Button
type = { isSubmiting ? "submit" : null }
>
{!isEditing ? "Edit" : "Save"
}
</Button>onClick條件handleEnterEditMode
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/494666.html
標籤：javascript 反应 反应钩子 材料-ui 反应挂钩形式