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

编程问答 2022-07-05

问题描述

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>

我对上述代码有疑问。

enter image description here

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

但是，每当我单击编辑图标时，输入框都会变为空，而不是具有初始值。

解决此问题的解决方案是什么？

解决方法

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

import "antd/dist/antd.css";

然后删除<Paragraph>组件内的空格，它应该是：

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

here是有效链接

antdantdantdformsformsformsparagraphparagraphreactjsreactjsreactjsreactjstypography