Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@uiw/react-input
Advanced tools
Readme
通过鼠标或键盘输入内容,是最基础的表单域的包装。
import { Input } from 'uiw';
// or
import Input from '@uiw/react-input';
import React from 'react';
import { Input } from 'uiw';
export default function Demo() {
return (
<div>
<Input placeholder="请输入内容" style={{ maxWidth: 200 }} />
</div>
);
}
import React from 'react';
import { InputNumber, Row, Col } from 'uiw';
export default function Demo() {
return (
<div>
<Row gutter={10}>
<Col fixed>
<InputNumber
placeholder="请输入内容"
style={{ width: 200 }}
/>
</Col>
<Col fixed>限制大小</Col>
<Col fixed>
<InputNumber
placeholder="请输入内容"
style={{ width: 200 }}
min={1}
max={10}
/>
</Col>
<Col fixed>超出限界警告</Col>
<Col fixed>
<InputNumber
placeholder="请输入内容"
style={{ width: 200 }}
min={1}
max={10}
overLimitColor={'red'}
/>
</Col>
<Col fixed>设置步涨值</Col>
<Col fixed>
<InputNumber
placeholder="请输入内容"
style={{ width: 200 }}
step={5}
/>
</Col>
</Row>
</div>
)
};
import React from 'react';
import { Form, Input, InputNumber, Row, Col, Button, Notify } from 'uiw';
export default function Demo() {
return (
<Form
onChange={({ initial, current }) => { }}
onSubmitError={(error) => {
console.log('error:', error)
return error && error.filed ? { ...error.filed } : null;
}}
onSubmit={({initial, current}) => {
if (current.input && current.input.length > 3) {
Notify.success({
title: '提交成功!',
description: `填写:【${current.input.toString()}】!`
});
} else {
Notify.error({ title: '提交失败!', description: '必须长度超过 3 个字符!' });
}
const ErrObj = {};
if (current.input && current.input.length < 4) {
ErrObj.input = '😆 必须长度超过 3 个字符!';
}
if(Object.keys(ErrObj).length > 0) {
const err = new Error();
err.filed = ErrObj;
throw err;
}
}}
fields={{
input: {
value: 'www',
label: '请输入内容',
help: '必须长度超过 3 个字符!',
validator: (value = '') => value.length < 4 ? '必填选项!' : null,
children: <Input placeholder="请输入内容" style={{ maxWidth: 200 }} />,
},
inputNumber: {
value: 'www',
label: '请输入内容',
help: '必须长度超过 3 个字符!',
validator: (value = '') => value.length < 4 ? '必填选项!' : null,
children: <InputNumber placeholder="请输入内容" style={{ maxWidth: 200 }} />,
},
}}
>
{({ fields, state, canSubmit }) => {
return (
<div>
<Row>
<Col>{fields.input}</Col>
</Row>
<Row>
<Col>{fields.inputNumber}</Col>
</Row>
<Row>
<Col>
<Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
</Col>
</Row>
<Row>
<Col>
<pre style={{ padding: 10, marginTop: 10 }}>
{JSON.stringify(state.current, null, 2)}
</pre>
</Col>
</Row>
</div>
);
}}
</Form>
);
}
import React from 'react';
import { Input, Row, Col } from 'uiw';
const stylItem = { margin: 20 };
export default function Demo() {
return (
<div>
<Row gutter={10}>
<Col fixed>
<Input preIcon="delete" placeholder="请输入内容" />
</Col>
<Col fixed>
<Input preIcon="tag" placeholder="请输入内容" />
</Col>
<Col fixed>
<Input preIcon="picasa" placeholder="请输入内容" />
</Col>
<Col fixed>
<Input preIcon="like-o" placeholder="请输入内容" />
</Col>
</Row>
</div>
)
}
import React from 'react';
import { Input, Row, Col, Button, Tag } from 'uiw';
export default function Demo() {
return (
<div>
<Row gutter={10}>
<Col fixed>
<Input
preIcon="like-o"
placeholder="请输入密码"
addonAfter={<Button icon="lock" size="small" basic type="light" />}
/>
</Col>
<Col fixed>
<Input
preIcon="tag"
placeholder="请输入内容"
addonAfter={<Tag title="1000" color="#28a745" />}
/>
</Col>
<Col fixed>
<Input
preIcon="search"
placeholder="请输入内容"
addonAfter={<Button icon="apple" size="small" type="primary">按钮</Button>}
/>
</Col>
<Col fixed>
<Input
preIcon="tag"
placeholder="请输入内容"
addonAfter={<Button size="small" type="primary">按钮</Button>}
/>
</Col>
</Row>
</div>
)
}
import React from 'react';
import { Input, Row, Col, Tag, Button } from 'uiw';
export default function Demo() {
return (
<div>
<Row gutter={10} style={{ marginBottom: 10 }}>
<Col fixed>
<Input
preIcon="like-o"
size="large"
placeholder="请输入密码"
addonAfter={<Button icon="lock" basic type="light" />}
/>
</Col>
<Col fixed>
<Input
preIcon="search"
placeholder="请输入内容"
addonAfter={<Button icon="arrow-right" basic size="small" type="light" />}
/>
</Col>
<Col fixed>
<Input
preIcon="tag"
size="small"
placeholder="请输入内容"
addonAfter={<Button size="small" type="primary">按钮</Button>}
/>
</Col>
</Row>
<Row gutter={10} style={{ marginBottom: 10 }}>
<Col fixed>
<Input
preIcon="like-o"
size="large"
placeholder="请输入密码"
addonAfter={<Tag title="1000" color="#28a745" />}
/>
</Col>
<Col fixed>
<Input
preIcon="tag"
placeholder="请输入内容"
addonAfter={<Tag title="药丸" color="#1C7CEB" color="#40bf16">丸</Tag>}
/>
</Col>
<Col fixed>
<Input
preIcon="tag"
size="small"
placeholder="请输入内容"
addonAfter={<Tag title="1000" color="#28a745" />}
/>
</Col>
</Row>
<Row gutter={10} style={{ marginBottom: 10 }}>
<Col fixed>
<Input
preIcon="like-o"
size="large"
placeholder="请输入密码"
addonAfter={<Button icon="apple" type="primary">按钮</Button>}
/>
</Col>
<Col fixed>
<Input
preIcon="search"
placeholder="请输入内容"
addonAfter={<Button size="small" type="primary">搜索</Button>}
/>
</Col>
<Col fixed>
<Input
preIcon="tag"
size="small"
placeholder="请输入内容"
addonAfter={<Button size="small" type="primary">按钮</Button>}
/>
</Col>
</Row>
<Row gutter={10} style={{ marginBottom: 10 }}>
<Col fixed>
<Input
preIcon="like-o"
placeholder="请输入密码"
addonAfter={<Button size="small" type="light">亮按钮</Button>}
/>
</Col>
<Col fixed>
<Input
placeholder="请输入内容"
addonAfter={<Button size="small" type="danger">按钮</Button>}
/>
</Col>
<Col fixed>
<Input
placeholder="请输入内容"
addonAfter={<Button size="small" type="warning">按钮</Button>}
/>
</Col>
</Row>
<Row gutter={10}>
<Col fixed>
<Input size="small" preIcon="like-o" placeholder="请输入密码" />
</Col>
<Col fixed>
<Input size="small" placeholder="请输入内容" />
</Col>
<Col fixed>
<Input
size="small"
preIcon="like-o"
placeholder="请输入内容"
addonAfter={<Button size="small" type="warning">按钮</Button>}
/>
</Col>
</Row>
</div>
)
}
import React from 'react';
import { Input, Row, Col, Button } from 'uiw';
class Demo extends React.Component {
constructor() {
super();
this.state = {
btnIcon: 'lock',
}
}
onClick() {
this.setState({
btnIcon: this.state.btnIcon === 'lock' ? 'unlock' : 'lock',
})
}
render() {
return (
<Row gutter={10}>
<Col fixed>
<Input
ref={(instance) => {
if (instance) {
console.log('instance:', instance);
}
}}
preIcon="like-o"
type={this.state.btnIcon === 'lock' ? 'password' : 'text'}
placeholder="请输入密码"
addonAfter={<Button icon={this.state.btnIcon} onClick={this.onClick.bind(this)} size="small" basic type="light" />}
/>
</Col>
</Row>
)
}
}
export default Demo;
import React from 'react';
import { Icon, Input, Button, Row, Col} from 'uiw';
const stylItem = { margin: 20 };
export default function Demo() {
return (
<Row gutter={10}>
<Col fixed>
<Input disabled preIcon="delete" placeholder="请输入内容" />
</Col>
<Col fixed>
<Input disabled preIcon="tag" placeholder="请输入内容" />
</Col>
<Col fixed>
<Input
disabled
preIcon="picasa"
placeholder="请输入内容"
addonAfter={
<Button icon="close" disabled size="small" basic type="light" />
}
/>
</Col>
<Col fixed>
<Input disabled preIcon="like-o" placeholder="请输入内容" />
</Col>
</Row>
);
}
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
value | 绑定值 | String | - | |
disabled | 禁用输入框 | Boolean | false | |
preIcon | 输入框前 面放置图标 | String/ReactNode | - | |
addonAfter | 带标签的 input,设置后置标签 | String/ReactNode | - | |
size | 指定输入框的尺寸,除了默认的大小外,还提供了 large 、small 和 default 三种尺寸。 | String | - | |
inputStyle | 传递给input的样式,在需要动态设置样式场景下使用 | Object | - | v4.18.2 |
在v4.18.2中增加
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
min | 最小值 | Number | - | |
max | 最大值 | Number | - | |
step | 设置步长值 | Number | - | |
overLimitColor | 允许超出min ,max 限制, 使用该警告色显示 | String | - |
更多属性文档请参考 Input。
FAQs
Input component
The npm package @uiw/react-input receives a total of 276 weekly downloads. As such, @uiw/react-input popularity was classified as not popular.
We found that @uiw/react-input demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.