---
order: 3
title:
zh-CN: 可交互
en-US: Interactive
---
## zh-CN
提供可编辑和可复制等额外的交互能力。
## en-US
Provide additional interactive capacity of editable and copyable.
```jsx
import React, { useState } from 'react';
import { Typography } from 'antd';
import { HighlightOutlined, SmileOutlined, SmileFilled } from '@ant-design/icons';
const { Paragraph } = Typography;
const Demo: React.FC = () => {
const [editableStr, setEditableStr] = useState('This is an editable text.');
const [customIconStr, setCustomIconStr] = useState('Custom Edit icon and replace tooltip text.');
const [hideTooltipStr, setHideTooltipStr] = useState('Hide Edit tooltip.');
const [lengthLimitedStr, setLengthLimitedStr] = useState(
'This is an editable text with limited length.',
);
return (
<>
{editableStr}
,
tooltip: 'click to edit text',
onChange: setCustomIconStr,
}}
>
{customIconStr}
{hideTooltipStr}
{lengthLimitedStr}
This is a copyable text.
Replace copy text.
, ],
tooltips: ['click here', 'you clicked!!'],
}}
>
Custom Copy icon and replace tooltips text.
Hide Copy tooltips.
);
};
ReactDOM.render(, mountNode);
```