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>
  );
};