React：使用相同的表單創建和更新記錄

Question

我是 ReactJS 的新人，建了一個 Create 表單來記錄。 另一方面，現在我需要創建一個更新表單，我想知道一個優雅的解決方案並將其應用於下一個項目。

我檢查了幾個項目和示例，但無法確定以下問題：

1.我可以使用相同的表格來創建和更新嗎？ 有一個合適的例子嗎？

2.在使用Update form 的時候，我想通過props 將記錄傳遞給Update form，然后將這些值填充到相關的控件中。 rest 好像和Create form差不多吧？ 或者是否有用於此目的的特定方法？

3.如何將記錄作為 prop 傳遞給更新表單（我通過路由打開它，然后我應該傳遞查詢參數等嗎？）

Answer 1

您可以制作一個單獨的 Form 組件，它接受道具並將它們設置為初始 state，然后在編輯時更新其本地 state。 該表單還在提交時進行回調。 現在，

1. 當你想創建一個新表單時，除了創建回調之外，你不傳遞任何數據
2. 當你想更新數據時，你傳遞道具和更新回調。

這是一個供參考的示例沙箱 - https://codesandbox.io/s/happy-thunder-0pjtvr?file=/src/App.js 。

表單組件

const Form = ({ name = "", email = "", callback }) => {
  const [data, setData] = useState({ name: name, email });
  const handleSubmit = (ev) => {
    ev.preventDefault();
    callback(data);
  };
  useEffect(() => {
    setData({ name, email });
  }, [name, email]);
  return (
    <form onSubmit={handleSubmit}>
      <input
        value={data.name}
        onChange={(ev) => setData({ ...data, name: ev.target.value })}
        name="name"
        placeholder="Name"
      />
      <input
        value={data.email}
        onChange={(ev) => setData({ ...data, email: ev.target.value })}
        name="email"
        placeholder="Email"
      />
      <button>Submit</button>
    </form>
  );
};