提及

提及组件用于在文本中标记对象。

导入#


import { Mention } from 'primereact/mention';
         

基本用法#

提及组件用作受控组件，需要使用 value 和 onChange 属性。此外，还需要 suggestions 和 onSearch 来查询结果。


<Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
    placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} />
         

触发器#

用于定义输入字段中提及某人或某物所需的关键字。


<Mention value={value} onChange={(e) => setValue(e.target.value)} trigger={['@', '#']} suggestions={multipleSuggestions} onSearch={onMultipleSearch}
    field={['nickname']} placeholder="Enter @ to mention people, # to mention tag" itemTemplate={multipleItemTemplate} rows={5} cols={40} />
         

自动调整大小#

启用 autoResize 后，文本区域将扩展而不是显示滚动条。


<Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
    placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} autoResize />
         

浮动标签#

当输入字段获得焦点时，浮动标签会出现在输入字段的顶部。


<span className="p-float-label">
    <Mention inputId="newpost" value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} 
        field="nickname" rows={5} cols={40} itemTemplate={itemTemplate} />
    <label htmlFor="newpost">New Post</label>
</span>
         

无效#

使用 p-invalid 类添加无效状态样式以指示验证失败。


<Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
    placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} inputClassName="p-invalid" />
         

禁用#

当存在 disabled 时，该元素无法编辑和获得焦点。


<Mention disabled />
         

可访问性#

屏幕阅读器

用于描述组件的值可以通过结合使用 label 标签和 inputId 属性，或使用 aria-labelledby、aria-label 属性来提供。输入元素除了具有 aria-autocomplete、aria-haspopup 和 aria-expanded 属性外，还具有 combobox 角色。输入和弹出窗口之间的关系是通过 aria-controls 创建的，aria-activedescendant 属性用于指导屏幕阅读器在弹出列表内进行键盘导航时读取哪个选项。

弹出列表具有一个 id，该 id 引用输入元素的 aria-controls 属性，并使用 listbox 作为角色。每个列表项都具有 option 角色和一个 id，以匹配输入元素的 aria-activedescendant。


<label htmlFor="men1">Username</label>
<Mention inputId="men1" />

<span id="men2">Email</span>
<Mention aria-labelledby="men2" />

<Mention aria-label="City" />
     

键盘支持

按键功能
tab当弹出窗口不可见时，将焦点移动到输入元素。如果弹出窗口打开并且突出显示了一个项目，则弹出窗口将关闭，选择该项目，并且焦点将移动到下一个可聚焦的元素。
向上箭头如果弹出窗口可见，则突出显示上一个项目。
向下箭头如果弹出窗口可见，则突出显示下一个项目。
回车如果弹出窗口可见，则选择突出显示的项目并关闭弹出窗口。
Home如果弹出窗口可见，则突出显示第一个项目。
End如果弹出窗口可见，则突出显示最后一个项目。
Escape隐藏弹出窗口。
                  PrimeReact 10.9.1 由 PrimeTek