输入 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
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 | 组件在输入时的回调(值更新时) |