在反应中，我想要两个按钮打开相同的模式，但两个按钮的操作不同

Question

我有两个页面模式和欢迎组件 在模态组件上，我有带有输入字段的表单，在欢迎组件上，我有两个按钮添加和编辑详细信息，单击添加应该有打开的模式，具有输入字段，单击保存按钮，详细信息应添加到数据库中，编辑时相同单击编辑相同模式的按钮应打开并显示详细信息，用户可以编辑这些详细信息

Answer 1

这样的东西有用吗？

function App() {
  const [modalOpen, setModalOpen] = useState(false);
  const [item, setItem] = useState();
  const itemToEdit = {
    // Some properties - perhaps also stateful and selected from a list.
  }

  function handleAdd() {
    setItem({});
    setModalOpen(true);
  }

  function handleEdit() {
    setItem(itemToEdit);
    setModalOpen(true);
  }

  return <>
    <Modal isOpen={modalOpen} item={item} />
    <button onClick={handleAdd}>Add</button>
    <button onClick={handleEdit}>Edit</button>
  </>
}