mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-26 20:20:00 +08:00
196a4351e3
* docs(badge): replace class component with hooks * docs(button): replace class component with hooks * docs(calendar): replace class component with hooks * docs(card): replace class component with hooks * docs(button): replace class component with hooks * chore(deps): remove webpack devDependencies * docs(cascader): replace class component with hooks * docs(checkbox): replace class component with hooks * docs(collapse): replace class component with hooks * docs(comment): replace class component with hooks * docs(descriptions): replace class component with hooks * docs(config-provider): replace class component with hooks * docs(date-picker): replace class component with hooks * docs(drawer): replace class component with hooks * docs(dropdown): replace class component with hooks * docs(dropdown): replace class component with hooks * docs(empty): replace class component with hooks * docs(grid): replace class component with hooks * docs(input): replace class component with hooks * docs(input-number): replace class component with hooks * docs(demo): fix lint error * docs(layout): replace class component with hooks * docs(list): replace class component with hooks * docs(mentions): replace class component with hooks * docs: fix code review issue
948 B
948 B
| order | title | ||||
|---|---|---|---|---|---|
| 3 |
|
zh-CN
通过 prefix 属性自定义触发字符。默认为 @, 可以定义为数组。
en-US
Customize Trigger Token by prefix props. Default to @, Array<string> also supported.
import { Mentions } from 'antd';
const { Option } = Mentions;
const MOCK_DATA = {
'@': ['afc163', 'zombiej', 'yesmeck'],
'#': ['1.0', '2.0', '3.0'],
};
export default () => {
const [prefix, setPrefix] = React.useState('@');
const onSearch = (_, prefixValue) => {
setPrefix(prefixValue);
};
return (
<Mentions
style={{ width: '100%' }}
placeholder="input @ to mention people, # to mention tag"
prefix={['@', '#']}
onSearch={onSearch}
>
{(MOCK_DATA[prefix] || []).map(value => (
<Option key={value} value={value}>
{value}
</Option>
))}
</Mentions>
);
};