键输入

PinInput组件被优化用于输入数字序列. 最爱 常见的应用是用于输入单用安全代码. 已经优化了 快速输入数字.

安装

yarn add @chakra-ui/pin-input

or

npm i @chakra-ui/pin-input

导入组件

import {
  PinInput,
  PinInputField,
  usePinInput,
  usePinInputField,
} from "@chakra-ui/pin-input"

使用量

Chakra UI出口两个主要部件, PinInput 财务报告和审定财务报表 PinInputField 改为 组成 PinInput 组件。 Chakra UI 也提供可以创建的钩子 自定义 PinInput 组件.

<PinInput defaultValue="234">
  <PinInputField />
  <PinInputField />
  <PinInputField />
</PinInput>

function PinInputHookExample() {
  const context = usePinInput({ autoFocus: true })
  const input1 = usePinInputField({ context })
  const input2 = usePinInputField({ context })
  const input3 = usePinInputField({ context })
  const input4 = usePinInputField({ context })

  return (
    <div>
      <input style={style} {...input1} />
      <input style={style} {...input2} />
      <input style={style} {...input3} />
      <input style={style} {...input4} />
    </div>
  )
}

大小

<PinInput size="lg" defaultValue="234">
  <PinInputField />
  <PinInputField />
  <PinInputField />
</PinInput>

已控制

function ControlledPinInput() {
  const [value, setValue] = React.useState("")

  const handleChange = (value: string) => {
    setValue(value)
  }

  const handleComplete = (value: string) => {
    console.log(value)
  }
  return (
    <PinInput value={value} onChange={handleChange} onComplete={handleComplete}>
      <PinInputField />
      <PinInputField />
      <PinInputField />
    </PinInput>
  )
}