触发 onChange 时 Ant 设计的可编辑段落值变为空答案

【问题标题】：Ant design editable Paragraph value become null when onChange is triggered触发 onChange 时 Ant 设计的可编辑段落值变为空
【发布时间】：2020-09-13 15:58:10
【问题描述】：

import {Typography} from 'antd'
const {Paragraph} = Typography

const [value, setValue] = useState("This is initial value");
const onChangeEdit = editVal => {
    setValue(editVal);
};

<Paragraph editable={{ onChange: onChangeEdit }}> {value} </Paragraph>

我对上面的代码有疑问。

最初，段落将“这是初始值”作为初始值。因此，如果我开始编辑，它应该具有“这是初始值”作为初始值。

但是每当我点击编辑图标时，输入框变成空而不是初始值。

解决这个问题的方法是什么？

【问题讨论】：

看来代码没问题。为了更好地调试，您可以将完整代码放在codesandbox。
嘿@Chanandrei，感谢您的评论，here 是示例代码
仅供参考，here 是排版的官方文档

标签： reactjs forms antd paragraph typography

【解决方案1】：

我解决了这个问题！首先，在 index.js 中包含 antd 的 css

import "antd/dist/antd.css";

然后去掉<Paragraph>组件里面的空格，应该是：

<Paragraph editable={{ onChange: onChange }}>{value}</Paragraph>

here 是工作链接

【讨论】：