ReactJS UI Ant Design 输入组件

Ant Design是一套优秀的React组件库，用于快速开发Web界面。Ant Design中提供了丰富的输入组件，让开发人员可以快速地实现各种输入及数据校验功能。

基本输入框

Ant Design提供了基本的输入框组件，可以很容易地实现文本、数字、邮箱等基本输入功能。

import { Input } from 'antd';

<Input placeholder="请输入" />
<Input type="number" placeholder="请输入数字" />
<Input type="email" placeholder="请输入邮箱" />

带前后缀的输入框

Ant Design还提供了带前后缀的输入框组件，可以在输入框中添加额外的文本或图标。

import { Input, Select } from 'antd';
const { Option } = Select;

<Select defaultValue="http://" style={{ width: 90 }}>
  <Option value="http://">http://</Option>
  <Option value="https://">https://</Option>
</Select>
<Input
  addonBefore={<Select defaultValue="http://" style={{ width: 90 }}>
    <Option value="http://">http://</Option>
    <Option value="https://">https://</Option>
  </Select>}
  placeholder="请输入网址"
/>
<Input
  addonAfter={<Select defaultValue=".com" style={{ width: 80 }}>
    <Option value=".com">.com</Option>
    <Option value=".jp">.jp</Option>
    <Option value=".cn">.cn</Option>
    <Option value=".org">.org</Option>
  </Select>}
  placeholder="请输入网址"
/>

搜索框

Ant Design中提供了搜索框组件，可以方便地实现搜索功能。

import { Input } from 'antd';

<Input.Search placeholder="请输入搜索内容" onSearch={value => console.log(value)} enterButton />

密码框

Ant Design中提供了密码框组件，可以确保用户输入的密码不可见。

import { Input } from 'antd';

<Input.Password placeholder="请输入密码" />

多行输入框

Ant Design中提供了多行输入框组件，可以实现用户多行文本输入功能。

import { Input } from 'antd';

<Input.TextArea placeholder="请输入多行文本" />

数据校验

Ant Design中的输入框组件支持数据校验功能，可以轻松实现数据校验。

import { Input } from 'antd';
const { TextArea } = Input;

const validateInput = (rule, value, callback) => {
  if (value && value.length < 5) {
    callback('长度不能小于5');
  } else {
    callback();
  }
};

<Form.Item label="内容">
  {getFieldDecorator('input', { rules: [{ validator: validateInput }] })}
  <Input placeholder="请输入" />
</Form.Item>

<Form.Item label="多行内容">
  {getFieldDecorator('textarea', { rules: [{ validator: validateInput }] })}
  <TextArea placeholder="请输入" />
</Form.Item>

以上就是Ant Design中常用的输入组件，具体使用可参考官方文档。