--- order: 3 title: zh-CN: 可交互 en-US: Interactive --- ## zh-CN 提供可编辑和可复制等额外的交互能力。 ## en-US Provide additional interactive capacity of editable and copyable. ```tsx import React, { useState } from 'react'; import { Radio, Typography, Divider } from 'antd'; import { CheckOutlined, HighlightOutlined, SmileOutlined, SmileFilled } from '@ant-design/icons'; 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; ```