编辑时重置 Chakra UI 可编辑输入答案

【问题标题】：Reset Chakra UI Editable Input when editing编辑时重置 Chakra UI 可编辑输入
【发布时间】：2022-07-22 01:14:50
【问题描述】：

我正在使用 chakra UI Editable 组件，如果没有可用值，则将“-”设置为默认值。因此，当编辑输入时，如下所示。但我想在编辑时删除'-'。

这是我的代码。

<Editable
 defaultValue={rate || '-'}
 submitOnBlur={false}
>
{(props) => (
  <>
    <EditablePreview/>
    <EditableInput
        onBlur={null}
    />
    <EditableControls
        {...props}
        id={no}
    />
  </>
)}

沙盒：https://codesandbox.io/s/summer-sound-0wvcr?file=/src/App.js

【问题讨论】：

你能为此添加沙箱吗？或完整代码。它比容易修复
这是我的沙盒：codesandbox.io/s/summer-sound-0wvcr?file=/src/App.js
@ShubhamVerma 这是我的沙箱：codesandbox.io/s/summer-sound-0wvcr?file=/src/App.js
您需要通过您自己的受控组件来处理此问题。一旦您单击编辑，该值将不存在。所以你在编辑时永远不会得到-这个。这是我尝试过的小型 POC：codesandbox.io/s/quirky-galileo-v3l4b?file=/src/App.js

标签： javascript reactjs chakra-ui

【解决方案1】：

您可以使用 Chakra UI 提供的placeholder 道具来实现您想要的。

Visit documentation to know more

Visit Sandbox-->

【讨论】：