Input 输入框

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

表单输入，一般配合Form使用

API

Input

Input.TextArea

Input.Group

Input/TextArea 内部函数(通过refs获取)

ARIA and KeyBoard

代码示例

简单

查看源码在线预览

import { Input } from '@alifd/next';
function onChange(v) {
    console.log(v);
}
ReactDOM.render(<div>
    <Input size="large" placeholder="Large" onChange={onChange} aria-label="Large" /><br /><br />
    <span id="J_InputMedium" style={{display: 'none'}}>Aria Labelby Demo </span>
    <Input placeholder="Medium" aria-label="Medium" aria-labelledby="J_InputMedium" /><br /><br />
    <Input placeholder="Small" size="small" label="SIZE :" id="J_InputSmall" /><br /><br />
    <Input.TextArea placeholder="TextArea" aria-label="TextArea" />
</div>, mountNode);

密码输入框

设置 Input 为 密码类型；

查看源码在线预览

import { Input } from '@alifd/next';
ReactDOM.render(
    <div>
        <Input htmlType="password" defaultValue="whoami" aria-label="Please input password"/>
    </div>
    , mountNode);

前后扩展

查看源码在线预览

import { Input } from '@alifd/next';
ReactDOM.render(<div>
    <Input hasLimitHint
        addonTextBefore="http://"
        addonTextAfter=".com"
        size="large"
        defaultValue="alibaba"
        maxLength={2}
        aria-label="input with config of addonTextBefore and addonTextAfter" /><br /><br />
    <Input
        addonTextBefore="http://"
        addonTextAfter=".com"
        size="medium"
        value="alibaba"
        aria-label="input with config of addonTextBefore and addonTextAfter" /><br /><br />
    <Input
        addonTextBefore="http://"
        addonTextAfter=".com"
        size="small"
        value="alibaba"
        aria-label="input with config of addonTextBefore and addonTextAfter" />
</div>
    , mountNode);

清除按钮

通过设置 hasClear 添加清除按钮.

hint为水印按钮，和hasClear占用同一个地方配合使用

查看源码在线预览

import { Input } from '@alifd/next';
const onChange = (value) => {
    console.log(value);
};
const onBlur = (e) => {
    console.log(e);
};
ReactDOM.render(
    <div>
        <Input
            hasClear
            defaultValue="clear by click"
            size="small"
            aria-label="input with config of hasClear" onChange={onChange} /><br/><br/>
        <Input
            hasClear
            defaultValue="2019-09-10 10:10:20"
            aria-label="input with config of hasClear"
            onChange={onChange}
            onBlur={onBlur}
            hint="calendar"/><br/><br/>
        <Input
            hasClear
            defaultValue="clear by click"
            size="large"
            aria-label="input with config of hasClear"
            onChange={onChange} /><br/><br/>
    </div>
    , mountNode);

错误状态

为 Input 设置 error 状态；

查看源码在线预览

import { Input } from '@alifd/next';
ReactDOM.render(
    <div>
        <Input state="error"
            placeholder="error"
            size="small"
            aria-live="assertive"
            aria-label="error" /><br/><br/>
        <Input state="error"
            hasLimitHint
            maxLength={100}
            placeholder="error"
            size="medium"
            aria-live="assertive"
            aria-label="error" /><br/><br/>
        <Input state="error"
            multiple
            placeholder="error"
            size="large"
            aria-live="assertive"
            aria-label="error" /><br/><br/>
        <Input state="success"
            size="small"
            value="success"
            aria-live="assertive"
            aria-label="success"/><br/><br/>
        <Input state="success"
            maxLength={100}
            hasLimitHint
            placeholder="success"
            size="medium"
            aria-live="assertive"
            aria-label="success"/><br/><br/>
        <Input state="success"
            placeholder="success"
            size="large"
            aria-live="assertive"
            aria-label="success"/><br/><br/>
        <Input state="loading"
            placeholder="loading"
            size="small"
            aria-live="assertive"
            aria-label="loading"/><br/><br/>
        <Input state="loading"
            placeholder="loading"
            size="medium"
            aria-live="assertive"
            aria-label="loading"/><br/><br/>
        <Input state="loading"
            placeholder="loading"
            size="large"
            aria-live="assertive"
            aria-label="loading"/><br/><br/>
    </div>
    , mountNode);

最大长度

最大长度 hasLimitHint 会展现限制数字; cutString 可控制是否要切割字符串, 用于只展示最大长度

查看源码在线预览

import { Input } from '@alifd/next';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            maxLength: 10,
            control: 'maxLen control'
        };
    }
    onChange(v) {
        console.log(v);
        this.setState({
            control: v
        });
    }
    onKeyDown(e, opts) {
        console.log('onKeyDown', opts);
    }
    render() {
        return (<div>
            <Input
                maxLength={10}
                size="large"
                placeholder="Large"
                value={this.state.control}
                hasLimitHint
                aria-label="input max length 10"
                onChange={this.onChange.bind(this)}
                onKeyDown={this.onKeyDown.bind(this)} /><br /><br />
            <Input
                maxLength={20}
                placeholder="medium"
                hasLimitHint
                cutString={false}
                aria-label="input max length 20"
                onChange={(v) => {
                    this.setState({control: v});
                    console.log(v);
                }}
                onKeyDown={(e, opts) => {
                    console.log('onKeyDown', opts);
                }} /><br /><br />
            <Input
                hasLimitHint
                size="small"
                placeholder="small"
                maxLength={100}
                aria-label="input max length 100" /><br /><br />
            <Input.TextArea
                placeholder="TextArea"
                maxLength={100}
                rows={4}
                hasLimitHint
                aria-label="input max length 100" /><br /><br />
            <Input maxLength={5} placeholder="Original maxLength" aria-label="input max length 5" />
        </div>);
    }
}
ReactDOM.render(<App/>, mountNode);

去除空格

onChange返回会自动去除头尾空字符

查看源码在线预览

import { Input } from '@alifd/next';
class App extends React.Component {
    state = {
        value: ''
    }
    onChange(value) {
        console.log('onChange', value);
        this.setState({
            value
        });
    }
    onKeyDown(e, opts) {
        console.log('onKeyDown', opts);
    }
    render() {
        return (<div>
            <Input trim placeholder="cant not input space" aria-label="cant not input space"
                onChange={this.onChange.bind(this)}
                onKeyDown={this.onKeyDown.bind(this)} />
        </div>);
    }
}
ReactDOM.render(<App/>, mountNode);

禁用状态

为 Input 设置 disabled 状态；

查看源码在线预览

import { Input } from '@alifd/next';
ReactDOM.render(
    <div>
        <Input disabled aria-label="disabled" placeholder="disabled" size="small"/><br /><br />
        <Input
            disabled
            aria-label="disabled"
            addonTextBefore="http://"
            addonTextAfter=".com"
            size="medium"
            value="alibaba"/><br /><br />
        <Input disabled aria-label="disabled" placeholder="medium" maxLength={10} hasLimitHint/><br /><br />
        <Input.TextArea disabled aria-label="disabled" placeholder="medium" maxLength={10} hasLimitHint/>
    </div>
    , mountNode);

水印和前后缀

可以添加水印， 为input前后端增加额外内容

查看源码在线预览

import { Input, Icon } from '@alifd/next';
class App extends React.Component {
    state = {
        v: ''
    };
    onChange = (v) => {
        this.setState({
            v
        });
    };
    onClick = () => {
        console.log(this.state.v);
    };
    render() {
        return (<div>
            <Input
                innerBefore={<Icon type="search" style={{margin: 4}} onClick={this.onClick} />}
                placeholder="search"
                value={this.state.v}
                aria-label="input with config of innerBefore"
                onChange={this.onChange}
            /><br /><br />
            <Input
                innerAfter={<Icon type="search" size="xs" onClick={this.onClick} style={{margin: 4}}/>}
                placeholder="search"
                value={this.state.v}
                aria-label="input with config of innerAfter"
                onChange={this.onChange}
            /><br /><br />
            <Input
                disabled
                defaultValue="hi"
                innerAfter={<Icon type="calendar" style={{margin: 4}}/>}
                aria-label="input with config of innerAfter and disabled" />
        </div>);
    }
}
ReactDOM.render(<App/>, mountNode);

自动高度

设置 Input 为 多行文本域；

查看源码在线预览

import { Input } from '@alifd/next';
ReactDOM.render(
    <div >
        <Input.TextArea
            autoHeight
            trim
            aria-label="auto height"
            placeholder="autoHeight"
            onKeyDown={(e, opts) => {
                console.log('onKeyDown', opts);
            }} /><br/><br/>
        <Input.TextArea aria-label="auto height" autoHeight={{ minRows: 2, maxRows: 6 }} />
    </div>
    , mountNode);

输入框组合

Group 具有两边长度固定中间组件任意伸缩的能力。在Input中可以用addonBefore/addonAfter快速使用

查看源码在线预览

import { Input, Select, Button } from '@alifd/next';
const select = (<Select aria-label="please select" >
    <option value="https">https</option>
    <option value="http">http</option>
</Select>);
const button = (<Button>search</Button>);
ReactDOM.render(<div>
    <Input.Group addonBefore={select} addonAfter={button}>
        <Input hasClear defaultValue="abc" style={{width: '100%'}} aria-label="please input" />
    </Input.Group>
    <br/><br/>
    <Input addonTextAfter=".com" addonBefore={select} aria-label="please input" />
</div>, mountNode);

自定义样式

通过style设置宽度

查看源码在线预览

import { Input } from '@alifd/next';
ReactDOM.render(
    <div>
        <Input placeholder="width:400" style={{width: 400}} aria-label="style width 400" /><br/><br/>
        <Input
            addonTextBefore="http://"
            addonTextAfter=".com"
            size="medium"
            value="alibaba"
            style={{width: 400}} aria-label="style width 400" /><br/><br/>
        <Input
            placeholder="medium"
            maxLength={10}
            hasLimitHint
            style={{width: 400}} aria-label="style width 400" /><br/><br/>
        <Input
            placeholder="medium"
            hasClear maxLength={10}
            hasLimitHint style={{width: 400}}
            className="my-input-class"
            state="success"
            aria-label="style width 400" /><br/><br/>
        <Input placeholder="className" className="my-input-class" aria-label="custom my input class" />
        <Input htmlType="hidden" aria-label="hidden input" />
    </div>
    , mountNode);

body .my-input-class {
    width:500px;
}

无障碍

通过aria-label对Input组件进行描述。关于键盘操作请参考ARIA and KeyBoard。

查看源码在线预览

import { Input } from '@alifd/next';
function onChange(v) {
    console.log(v);
}
function onKeyDown(v) {
    console.log(v);
}
ReactDOM.render(<div>
    <Input size="large" placeholder="please input" onChange={onChange} onKeyDown={onKeyDown} aria-label="this is input" /> 
</div>
    , mountNode);

相关区块

暂无相关区块