--- 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 = () => { 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); ```