在react中，我希望两个按钮打开相同的模式，但两个按钮的操作不同

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>
</>
}