如何重置Chakra UI中的Editable组件？

目前Chakra UI的Editable组件没有内置重置方法，当用户输入提交返回错误时，错误内容会停留在输入区域，无法自动恢复到之前的正确显示值。但直接给组件设置value属性会锁死编辑功能，这确实是个实际开发中会碰到的棘手问题。

要解决这个问题，可以通过受控状态管理实现重置效果，具体思路如下：

• 维护两个状态变量：一个存储已确认的原始正确值，另一个绑定Editable组件作为当前编辑的临时值；
• 用户编辑时更新临时值，提交成功后同步更新原始值；
• 提交失败时，将临时编辑值重置为原始值，即可恢复到之前的显示状态，同时组件依然保持可编辑性。

示例代码：

import { Editable, EditableInput, EditablePreview, Button } from '@chakra-ui/react';
import { useState } from 'react';

function ResetableEditable() {
  // 存储已确认的原始值
  const [confirmedValue, setConfirmedValue] = useState('初始默认文本');
  // 存储当前编辑的临时值
  const [editValue, setEditValue] = useState(confirmedValue);

  const handleSubmit = async () => {
    try {
      // 模拟接口提交逻辑
      const response = await fetch('/api/update-content', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content: editValue })
      });

      if (!response.ok) throw new Error('提交失败');
      
      // 提交成功，更新已确认的值
      setConfirmedValue(editValue);
    } catch (err) {
      // 提交失败，重置临时编辑值为已确认的值
      setEditValue(confirmedValue);
    }
  };

  return (
    <Editable
      value={editValue}
      onChange={setEditValue}
      onSubmit={handleSubmit}
    >
      <EditablePreview />
      <EditableInput />
      <Button mt={2} colorScheme="blue" onClick={handleSubmit}>
        保存修改
      </Button>
    </Editable>
  );
}

这种方式既实现了错误场景下的重置需求，又不会破坏Editable组件的编辑功能，完全适配业务场景。

内容的提问来源于stack exchange，提问作者vls9