输入 Input

看起来这里应该写点什么

默认

最普通的输入

import { useState } from "react"
import { Input } from "mmixel-ui"
 
const InputUsername = () => {
  const [username, setUsername] = useState("")
  return <Input placeholder="用户名" value={username} setValue={setUsername} />
}
 
export default InputUsername

密码

我闭上眼睛不看

import { useState } from "react"
import { Input } from "mmixel-ui"
 
const InputPassword = () => {
  const [password, setPassword] = useState("")
  return (
    <Input
      placeholder="密码"
      type="password"
      value={password}
      setValue={setPassword}
    />
  )
}
 
export default InputPassword

默认值

提前输入 value 可以更改默认值

import { useState } from "react"
import { Input } from "mmixel-ui"
 
const InputLabel = () => {
  const [label, setLabel] = useState("我叫阿杰")
  return <Input placeholder="你好" value={label} setValue={setLabel} />
}
 
export default InputLabel

形状

使用 rounded 更改形状

import { useState } from "react"
import { Input } from "mmixel-ui"
 
const InputLabel = () => {
  const [label, setLabel] = useState("")
  return <Input rounded placeholder="圆的" value={label} setValue={setLabel} />
}
 
export default InputLabel

禁用

使用 disabled 禁用输入

import { useState } from "react"
import { Input } from "mmixel-ui"
 
const InputLabel = () => {
  const [label, setLabel] = useState("")
  return (
    <Input disabled placeholder="已禁用" value={label} setValue={setLabel} />
  )
}
 
export default InputLabel

限制输入

规定只能写什么

import { useState } from "react"
import { Input } from "mmixel-ui"
 
const InputLabel = () => {
  const [content, setContent] = useState("")
  const [phone, setPhone] = useState("")
  return (
    <>
      <Input
        maxLength={5}
        placeholder="只能写5个字"
        value={label}
        setValue={setLabel}
      />
      <br />
      <Input
        onlyNumber
        placeholder="只能写数字"
        value={phone}
        setValue={setPhone}
      />
    </>
  )
}
 
export default InputLabel

显示字数

写作文时绞尽脑汁凑 800 字

0/800

const InputComposition = () => {
  const [title, setTitle] = useState("")
  const [composition, setComposition] = useState("")
  return (
    <>
      <Input
        showCount
        placeholder="我的妈妈"
        value={title}
        setValue={setTitle}
      />
      <br />
      <Input
        showCount
        maxLength={800}
        placeholder="我的妈妈是一个..."
        value={composition}
        setValue={setComposition}
      />
    </>
  )
}
 
export default InputComposition

前缀后缀

给组件添加前缀后缀

￥

const InputPrefixSuffix = () => {
  const [prize, setPrize] = useState("")
  const [keyword, setKeyword] = useState("")
  return (
    <>
      <Input
        prefix={<p>￥</p>}
        placeholder="价格"
        value={prize}
        setValue={setPrize}
      />
      <br />
      <Input
        suffix={
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="18"
            height="18"
            viewBox="0 0 24 24">
            <path
              fill="currentColor"
              d="M11 2c4.968 0 9 4.032 9 9s-4.032 9-9 9s-9-4.032-9-9s4.032-9 9-9Zm0 16c3.867 0 7-3.133 7-7s-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7Zm8.485.071l2.829 2.828l-1.415 1.415l-2.828-2.829l1.414-1.414Z"
            />
          </svg>
        }
        placeholder="搜索"
        value={keyword}
        setValue={setKeyword}
      />
    </>
  )
}
 
export default InputPrefixSuffix

回调

组件有多个回调

onEnter: 按下回车时
onFocus: 聚焦组件时
onBlur: 组件失焦时
onType: 组件输入时

const InputCallback = () => {
  const [label, setLabel] = useState("")
  return (
    <>
      <Input
        placeholder="干点什么"
        onEnter={() => {
          console.log("onEnter")
        }}
        onFocus={() => {
          console.log("onFocus")
        }}
        onBlur={() => {
          console.log("onBlur")
        }}
        onType={() => {
          console.log("onType")
        }}
        value={label}
        setValue={setLabel}
      />
    </>
  )
}
 
export default InputCallback

Input Props

Prop	Type	Default	Desc
value	`string`	`undefined`	输入的值
setValue	`Dispatch<SetStateAction<string>>`	`undefined`	改变值的方法
rounded	`boolean`	`false`	组件是否圆形
disabled	`boolean`	`false`	组件是否被禁用
type	`"text" \| "password"`	`"text"`	组件的类型
maxLength	`number`	`undefined`	组件最大输入字数
onlyNumber	`boolean`	`false`	组件是否只允许输入数字
showCount	`boolean`	`false`	组件是否显示已输入的字数
prefix	`ReactNode`	`undefined`	组件前缀
suffix	`ReactNode`	`undefined`	组件后缀
onEnter	`() => void`	`undefined`	按下`Enter`时的回调
onFocus	`() => void`	`undefined`	组件被对焦时的回调
onBlur	`() => void`	`undefined`	组件在失焦时的回调
onType	`() => void`	`undefined`	组件在输入时的回调（值更新时）

下拉菜单 Dropdown 单选 Radio