---
order: 3
title:
zh-CN: 可交互
en-US: Interactive
---
## zh-CN
提供可编辑和可复制等额外的交互能力。
## en-US
Provide additional interactive capacity of editable and copyable.
```tsx
import { CheckOutlined, HighlightOutlined, SmileFilled, SmileOutlined } from '@ant-design/icons';
import { Divider, Radio, Typography } from 'antd';
import React, { useState } from 'react';
const { Paragraph } = Typography;
const App: React.FC = () => {
const [editableStr, setEditableStr] = useState('This is an editable text.');
const [customIconStr, setCustomIconStr] = useState('Custom Edit icon and replace tooltip text.');
const [clickTriggerStr, setClickTriggerStr] = useState(
'Text or icon as trigger - click to start editing.',
);
const [chooseTrigger, setChooseTrigger] = useState<('icon' | 'text')[]>(['icon']);
const [customEnterIconStr, setCustomEnterIconStr] = useState(
'Editable text with a custom enter icon in edit field.',
);
const [noEnterIconStr, setNoEnterIconStr] = useState(
'Editable text with no enter icon in edit field.',
);
const [hideTooltipStr, setHideTooltipStr] = useState('Hide Edit tooltip.');
const [lengthLimitedStr, setLengthLimitedStr] = useState(
'This is an editable text with limited length.',
);
const radioToState = (input: string): ('icon' | 'text')[] => {
switch (input) {
case 'text':
return ['text'];
case 'both':
return ['icon', 'text'];
case 'icon':
default:
return ['icon'];
}
};
const stateToRadio = () => {
if (chooseTrigger.indexOf('text') !== -1) {
return chooseTrigger.indexOf('icon') !== -1 ? 'both' : 'text';
}
return 'icon';
};
return (
<>
{editableStr}
,
tooltip: 'click to edit text',
onChange: setCustomIconStr,
}}
>
{customIconStr}
Trigger edit with:{' '}
setChooseTrigger(radioToState(e.target.value))}
value={stateToRadio()}
>
icon
text
both
{clickTriggerStr}
,
tooltip: 'click to edit text',
onChange: setCustomEnterIconStr,
enterIcon: ,
}}
>
{customEnterIconStr}
,
tooltip: 'click to edit text',
onChange: setNoEnterIconStr,
enterIcon: null,
}}
>
{noEnterIconStr}
{hideTooltipStr}
{lengthLimitedStr}
h1. Ant Design
h2. Ant Design
h3. Ant Design
h4. Ant Design
h5. Ant Design
This is a copyable text.
Replace copy text.
, ],
tooltips: ['click here', 'you clicked!!'],
}}
>
Custom Copy icon and replace tooltips text.
Hide Copy tooltips.
);
};
export default App;
```