Input 输入框

Input 输入框

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

何时使用

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

API

输入框

参数	说明	类型	默认值
prefix	样式前缀	String	'next-'
value	当前值	String/Number	-
defaultValue	初始化值	String/Number	-
size	尺寸可选值:'small'(小)'medium'(中)'large'(大)	Enum	'medium'
disabled	状态设置文本域禁用状态	Boolean	false
multiple	是否为多行，不选则为单行	Boolean	false
maxLength	最大长度	Number	null
hasLimitHint	是否展现最大长度样式	Boolean	false
cutString	是否允许切割字符串	Boolean	true
hasClear	是否出现clear按钮	Boolean	false
state	状态（multiple模式不支持 loading/success 状态)可选值:'''error'(错误)'loading'(校验中)'success'(成功)	Enum	''
style	自定义内联样式	Object	-
htmlType	原生type	String	'text'
readOnly	只读	Boolean	false
trim	onChange返回会自动去除头尾空字符	Boolean	false
addonBefore	文本域前附加内容	ReactNode	-
addonAfter	文本域后附加内容	ReactNode	-
placeholder	输入提示	String	-
onPressEnter	按下回车的回调签名:Function() => void	Function	function() { }
onBlur	失去焦点时候触发的回调签名:Function() => void	Function	function() { }
onChange	发生改变的时候触发的回调签名:Function(value: String, e: Event) => void参数:value: {String} 数据e: {Event} DOM事件对象	Function	function() { }
getValueLength	自定义字符串计算长度方式签名:Function(value: String) => Number参数:value: {String} 数据返回值:{Number} 自定义长度	Function	function() { }
rows	multiple多行文本框高度 (不要直接用height设置多行文本框的高度, ie9 10会有兼容性问题)	Number	4
textIndent	文字缩进	Number	-
className	自定义class	String	-

代码示例

Input 组合

各类 Input 的组合展现。

查看源码在线预览

import { Input } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Input
      addonBefore="http://"
      addonAfter=".com"
      size="large"
      defaultValue="alibaba"
      maxLength={2}
      hasLimitHint
    />
    <br />
    <br />
    <Input
      addonBefore="http://"
      addonAfter=".com"
      size="medium"
      value="alibaba"
    />
    <br />
    <br />
    <Input
      addonBefore="http://"
      addonAfter=".com"
      size="small"
      value="alibaba"
    />
  </div>,
  mountNode
);

Input 输入框

我们为 <Input /> 输入框定义了三种尺寸（大、默认、小）

查看源码在线预览

import { Input } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Input size="large" placeholder="Large" />
    <br />
    <br />
    <Input className="textClsName" placeholder="Medium" />
    <br />
    <br />
    <Input placeholder="Small" size="small" />
  </div>,
  mountNode
);

清除按钮

通过设置 hasClear 添加清除按钮

查看源码在线预览

import { Input } from "@icedesign/base";
const onChange = value => {
  console.log(value);
};
const onBlur = e => {
  console.log(e);
};
ReactDOM.render(
  <div>
    <Input defaultValue="一键清除" hasClear onChange={onChange} size="small" />
    <br />
    <br />
    <Input hasClear onChange={onChange} onBlur={onBlur} />
    <br />
    <br />
    <Input defaultValue="一键清除" hasClear onChange={onChange} size="large" />
    <br />
    <br />
  </div>,
  mountNode
);

禁用状态

为 Input 设置 disabled 状态；

查看源码在线预览

import { Input } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Input disabled placeholder="disabled" size="small" />
    <br />
    <br />
    <Input
      disabled
      addonBefore="http://"
      addonAfter=".com"
      size="medium"
      value="alibaba"
    />
    <br />
    <br />
    <Input disabled placeholder="medium" maxLength={10} hasLimitHint />
    <br />
    <br />
    <Input multiple disabled placeholder="medium" maxLength={10} hasLimitHint />
  </div>,
  mountNode
);

最大长度

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

查看源码在线预览

import { Input, NumberPicker } from "@icedesign/base";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      maxLen: 10,
      control: "maxLen control"
    };
  }
  onChange(v) {
    console.log(v);
    this.setState({
      control: v
    });
  }
  render() {
    return (
      <div>
        <Input
          size="large"
          placeholder="Large"
          value={this.state.control}
          maxLength={this.state.maxLen}
          hasLimitHint
          onChange={this.onChange.bind(this)}
        />
        <br />
        <br />
        <Input
          placeholder="medium"
          maxLength={20}
          hasLimitHint
          cutString={false}
          onChange={v => {
            this.setState({ control: v });
          }}
        />
        <br />
        <br />
        <Input size="small" placeholder="small" maxLength={100} hasLimitHint />
        <br />
        <br />
        <Input multiple maxLength={100} rows="4" hasLimitHint />
        <br />
        <br />
        <Input maxLength={5} placeholder="原生maxLength=5" />
        <br />
        <br />
        maxLen受控：<NumberPicker
          value={this.state.maxLen}
          onChange={value => {
            this.setState({ maxLen: parseInt(value) });
          }}
        />
        <br />
        <br />
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

多行文本域

设置 Input 为多行文本域；

查看源码在线预览

import { Input } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Input multiple placeholder="multiple" />
  </div>,
  mountNode
);

密码输入框

设置 Input 为密码类型；

查看源码在线预览

import { Input } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Input htmlType="password" size="small" defaultValue="abcd" />
  </div>,
  mountNode
);

错误状态

为 Input 设置 error 状态；

查看源码在线预览

import { Input } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Input state="error" placeholder="error" size="small" />
    <br />
    <br />
    <Input
      state="error"
      maxLength={100}
      hasLimitHint
      placeholder="error"
      size="medium"
    />
    <br />
    <br />
    <Input state="error" placeholder="error" size="small" multiple />
    <br />
    <br />
    <Input state="success" size="small" value="success" />
    <br />
    <br />
    <Input
      state="success"
      maxLength={100}
      hasLimitHint
      placeholder="success"
      size="medium"
    />
    <br />
    <br />
    <Input state="success" placeholder="success" size="large" />
    <br />
    <br />
    <Input state="loading" placeholder="loading" size="small" />
    <br />
    <br />
    <Input state="loading" placeholder="loading" size="medium" />
    <br />
    <br />
    <Input state="loading" placeholder="loading" size="large" />
    <br />
    <br />
  </div>,
  mountNode
);

自定义style,className

通过style设置宽度

查看源码在线预览

import { Input } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Input placeholder="width:400" style={{ width: 400 }} />
    <br />
    <br />
    <Input
      addonBefore="http://"
      addonAfter=".com"
      size="medium"
      value="alibaba"
      style={{ width: 400 }}
    />
    <br />
    <br />
    <Input
      placeholder="medium"
      maxLength={10}
      hasLimitHint
      style={{ width: 400 }}
    />
    <br />
    <br />
    <Input
      placeholder="medium"
      maxLength={10}
      hasLimitHint
      style={{ width: 400 }}
      className="my-input-class"
      state="success"
    />
    <br />
    <br />
    <Input placeholder="className" className="my-input-class" />
    <Input htmlType="hidden" />
  </div>,
  mountNode
);

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

trim

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

查看源码在线预览

import { Input } from "@icedesign/base";
class App extends React.Component {
  state = {
    value: ""
  };
  onChange(value) {
    console.log(value);
    this.setState({
      value
    });
  }
  render() {
    return (
      <div>
        <Input
          trim
          value={this.state.value}
          onChange={this.onChange.bind(this)}
          placeholder="无法输入空格哦！"
        />
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

Input 输入框

Input 输入框

安装方法

开发指南

何时使用

API

输入框

代码示例

相关区块

暂无相关区块