react函数组件在页面上点击编辑保留原数据创建新数据

要实现在 React 函数组件中点击编辑保留原数据并创建新数据的功能，可以考虑以下步骤：

1. 在组件的 state 中添加一个 editable 属性，用来表示当前组件是否处于可编辑状态。
2. 在组件中添加一个编辑按钮，当点击该按钮时，将 editable 属性设置为 true，使组件进入编辑状态。
3. 在组件中添加一个保存按钮，当点击该按钮时，将 editable 属性设置为 false，并且将组件中的数据保存到新的数据对象中。
4. 如果用户取消编辑，可以添加一个取消按钮，当点击该按钮时，将组件的数据重置为原始数据，并将 editable 属性设置为 false。

下面是一个简单的示例代码：

import React, { useState } from "react";

function EditableData({ data }) {
  const [editable, setEditable] = useState(false);
  const [formData, setFormData] = useState(data);

  const handleEdit = () => {
    setEditable(true);
  };

  const handleSave = () => {
    setEditable(false);
    // 将 formData 保存到新的数据对象中
    const newData = { ...formData };
    // TODO: 保存 newData 到数据库或其他地方
  };

  const handleCancel = () => {
    setEditable(false);
    setFormData(data);
  };

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevData) => ({ ...prevData, [name]: value }));
  };

  return (
    <div>
      <div>
        Name: {editable ? <input name="name" value={formData.name} onChange={handleInputChange} /> : data.name}
      </div>
      <div>
        Age: {editable ? <input name="age" value={formData.age} onChange={handleInputChange} /> : data.age}
      </div>
      <button onClick={handleEdit}>Edit</button>
      {editable && (
        <>
          <button onClick={handleSave}>Save</button>
          <button onClick={handleCancel}>Cancel</button>
        </>
      )}
    </div>
  );
}

export default EditableData;

在上面的示例代码中，我们定义了一个 EditableData 组件，该组件接收一个 data 属性，表示需要编辑的数据。在组件中，我们使用 useState 钩子来保存 editable 和 formData 状态，其中 editable 表示当前组件是否处于可编辑状态，formData 保存当前组件的表单数据。

在组件中，我们使用条件渲染来渲染不同的内容，如果组件处于可编辑状态，我们显示 input 元素，否则显示数据。当点击 Edit 按钮时，我们将 editable 属性设置为 true，使组件进入可编辑状态。当点击 Save 按钮时，我们将 editable 属性设置为 false，并且将组件中的数据保存到新的数据对象中。如果用户取消编辑，我们将组件的数据重置为原始数据，并将 editable 属性设置为 false。

希望这个示例代码能够对你有所帮助！