令牌输入|种子 - 爱游戏体育首页

组件

令牌的输入

代码

令牌输入是一种专门的文本输入，它跟踪输入的值并将它们作为令牌显示给用户。

从“@sproutsocial/racine”中导入{To爱游戏体育官网首页kenInput}

); }" language="jsx" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:monospace;color:#c8cccc">

({token}) => {const [tokenSpecs, setTokenSpecs] = useState(token || []);return (<TokenInput id={"representativeExample"} name={"example"} token ={tokenSpecs} onchangetoken ={setTokenSpecs} />);}

            
             （
             {
             令牌
             }
             ）
             
             =＞
             
             {
             
            
            
             
             常量
             
             ［
             tokenSpecs
             ，
             setTokenSpecs
             ］
             
             =
             
             useState
             （
             令牌
             ||
             
             ［
             ］
             ）
             ；
             
            
            
             
            
            
             
             返回
             
             （
             
            
            
             
             <
             TokenInput
             
            
            
             
             id
             =
             {
             “representativeExample”
             }
             
            
            
             
             名字
             =
             {
             “例子”
             }
             
            
            
             
             令牌
             =
             {
             tokenSpecs
             }
             
            
            
             
             onChangeTokens
             =
             {
             setTokenSpecs
             }
             
            
            
             
             />
             
            
            
             
             ）
             ；
             
            
            
             
             }

属性">

名字	类型	描述
`id`	`字符串`	表单元素的ID，应该与关联标签的"for"值匹配
`名字`	`字符串`
`iconName`	`EnumIconNames`
`分隔符`	`字符串`	分隔符键名数组
`价值`	`字符串`	当前输入文本。控制输入文本时需要
`hasFocus`	`布尔`	当前焦点状态。需要通过onFocus和onBlur控制焦点
`activeToken`	`字符串`	当前选择令牌的Id
`令牌`	`{id:字符串，iconName?：EnumIconNames，价值：字符串，valid?: boolean, ... }`	当前令牌数组
`onChangeTokens`	`(token: TypeTokenSpec[]) => void`	更改令牌的标准控制。对于细粒度控制，请使用onAddToken和onRemoveToken
`onAddToken`	`(tokenSpec: TypeTokenSpec) => void`	添加令牌的细粒度控制。使用onRemoveToken代替onchangetoken
`onRemoveToken`	`(tokenId: string) =>无效`	对删除令牌的细粒度控制。使用onAddToken代替onchangetoken
`onClickToken`	`(e: SyntheticEvent， tokenId: string) => void`	控制单击令牌。当不存在时，单击令牌将其自身删除
`onChange`	`(e: SyntheticInputEvent， value: string) => void`	对用于创建令牌的输入文本进行细粒度控制
`onPaste`	`(e: SyntheticClipboardEvent， value: string) => void`	对粘贴文本的细粒度控制
`元素失去焦点时`	`(e: SyntheticFocusEvent< htmlinpuelement >) => void`
`得到焦点`	`(e: SyntheticFocusEvent< htmlinpuelement >) => void`
`onKeyDown`	`(e: SyntheticKeyboardEvent< htmlputelement >， value: string) => void`
`onKeyUp`	`(e: SyntheticKeyboardEvent< htmlputelement >， value: string) => void`
`ariaDescribedby`	`字符串`	属性，用于关联描述输入的其他元素，如错误
`ariaLabel`	`字符串`	如果没有随附的视觉标签，用于描述输入的标签
`占位符`	`字符串`	值未定义或为空时的占位符文本
`自动对焦`	`布尔`	挂载到DOM时会自动对焦元素吗
`禁用`	`布尔`	HTML禁用属性
`isInvalid`	`布尔`	输入的当前内容是否无效
`hasWarning`	`布尔`	输入的当前内容是否有任何警告
`要求`	`布尔`	HTML必需属性
`elemBefore`	`反应。节点`	16x16的元素，如图标
`elemAfter`	`反应。节点`	16x16的元素，如图标
`最大长度`	`数量`	最大输入文本长度
`tokenMaxLength`	`数量`	token的最大长度
`inputProps`	`任何`	Props来扩展到底层的输入元素
`innerRef`	`“输入”`	用于获取对基础元素的引用
`质量保证`	`对象`
`自动完成`	`字符串`	浏览器自动完成支持

食谱">

使用预先存在的令牌">

从“@sproutsocial/racine”中导入{To爱游戏体育官网首页kenInput}

{ const [tokenSpecs, setTokenSpecs] = useState(tokens || []); return ( ); }" language="jsx" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:monospace;color:#c8cccc">

({令牌= [{id:“1”,价值:“你好”},{id:“2”,价值:“世界 "}] }) => { const [tokenSpecs setTokenSpecs] = useState(令牌| | []);return (<TokenInput id={"existingTokensExample"} name={"example"} token ={tokenSpecs} onchangetoken ={setTokenSpecs} />);}

            
             （
             {
             令牌
             =
             
             ［
             {
             id
             ：
             “1”
             ，
             价值
             ：
             “你好”
             }
             ，
             
             {
             id
             ：
             “2”
             ，
             价值
             ：
             “世界”
             }
             ］
             
             }
             ）
             
             =＞
             
             {
             
            
            
             
             常量
             
             ［
             tokenSpecs
             ，
             setTokenSpecs
             ］
             
             =
             
             useState
             （
             令牌
             ||
             
             ［
             ］
             ）
             ；
             
            
            
             
            
            
             
             返回
             
             （
             
            
            
             
             <
             TokenInput
             
            
            
             
             id
             =
             {
             “existingTokensExample”
             }
             
            
            
             
             名字
             =
             {
             “例子”
             }
             
            
            
             
             令牌
             =
             {
             tokenSpecs
             }
             
            
            
             
             onChangeTokens
             =
             {
             setTokenSpecs
             }
             
            
            
             
             />
             
            
            
             
             ）
             ；
             
            
            
             
             }

与图标">

从“@sproutsocial/racine”中导入{To爱游戏体育官网首页kenInput}

{ const [tokenSpecs, setTokenSpecs] = useState(tokens || []); return ( } elemAfter={} id={"iconExample"} name={"example"} tokens={tokenSpecs} onChangeTokens={setTokenSpecs} /> ); }" language="jsx" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:monospace;color:#c8cccc">

({令牌= [{id:“1”,价值:“你好”},{id:“2”,价值:“世界 "}] }) => { const [tokenSpecs setTokenSpecs] = useState(令牌| | []);return (<TokenInput iconName="facebook") elemBefore={<Icon fixedWidth name="lock" />} elemAfter={<Icon fixedWidth name="search" />} id={"iconExample"} name={"example"} token ={tokenSpecs} onChangeTokens={setTokenSpecs} />);}

            
             （
             {
             令牌
             =
             
             ［
             {
             id
             ：
             “1”
             ，
             价值
             ：
             “你好”
             }
             ，
             
             {
             id
             ：
             “2”
             ，
             价值
             ：
             “世界”
             }
             ］
             
             }
             ）
             
             =＞
             
             {
             
            
            
             
             常量
             
             ［
             tokenSpecs
             ，
             setTokenSpecs
             ］
             
             =
             
             useState
             （
             令牌
             ||
             
             ［
             ］
             ）
             ；
             
            
            
             
            
            
             
             返回
             
             （
             
            
            
             
             <
             TokenInput
             
            
            
             
             iconName
             =
             ＂
             脸谱网
             ＂
             
            
            
             
             elemBefore
             =
             {
             <
             图标
             
             fixedWidth
             
             名字
             =
             ＂
             锁
             ＂
             
             />
             }
             
            
            
             
             elemAfter
             =
             {
             <
             图标
             
             fixedWidth
             
             名字
             =
             ＂
             搜索
             ＂
             
             />
             }
             
            
            
             
             id
             =
             {
             “iconExample”
             }
             
            
            
             
             名字
             =
             {
             “例子”
             }
             
            
            
             
             令牌
             =
             {
             tokenSpecs
             }
             
            
            
             
             onChangeTokens
             =
             {
             setTokenSpecs
             }
             
            
            
             
             />
             
            
            
             
             ）
             ；
             
            
            
             
             }