NumberPicker 数字输入框

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

安装方法

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

开发指南

何时使用

数字选择器，并对输入的数据做正确性检查、自动订正。

注意事项

• 自动订正可能会导致onChange返回值和你输入的数据不一样。

• 其中有些中间输入状态无法触发onChange，主要考虑到自动订正可能永远无法到达想要的值了。例如：

  • 0=>0.=>0.0=>0.01 中间两步不会触发onChange，因为如果订正会一直停留在0导致永远无法到达想要的值

  • min=10 的情况下, 输入 1=>12 第一步 1 不会触发onChange也不会订正数据，因为数字是一个一个输入的

• 如果输入时没触发onChange，会在onBlur检测数据正确性并触发onChange

API

数字输入框

代码示例

基本用法

如果是点击+ - 触发，可以通过 e.triggerType 获取onChange 第二个参数 e.type 可以获取事件类型。

查看源码在线预览

import { NumberPicker } from "@icedesign/base";
function onChange(value, e) {
  console.log(value, e.type, e.triggerType);
}
ReactDOM.render(
  <div>
    <NumberPicker onChange={onChange} />
  </div>,
  mountNode
);

不可用

不可用的 number picker。

查看源码在线预览

import { NumberPicker } from "@icedesign/base";
ReactDOM.render(
  <div>
    <NumberPicker disabled />
    <br />
    <br />
    <NumberPicker type="inline" disabled />
  </div>,
  mountNode
);

不可直接输入

用户不可直接输入编辑数据

查看源码在线预览

import { NumberPicker, Button } from "@icedesign/base";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editable: false,
      value: 0
    };
  }
  toogle() {
    this.setState({
      editable: !this.state.editable
    });
  }
  onChange(value) {
    console.log("changed", value);
    this.setState({
      value: value
    });
  }
  render() {
    return (
      <div>
        <NumberPicker
          onChange={this.onChange.bind(this)}
          value={this.state.value}
          editable={this.state.editable}
        />
        <br />
        <br />
        <Button onClick={this.toogle.bind(this)}>
          切换到 {!this.state.editable ? "可编辑" : "不可编辑"}
        </Button>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

inline 的 number picker

type 为 inline 的 number picker。

查看源码在线预览

import { NumberPicker } from "@icedesign/base";
function onChange(value) {
  console.log("changed", value);
}
ReactDOM.render(
  <div>
    <NumberPicker type="inline" onChange={onChange} />
  </div>,
  mountNode
);

宽度自定义

inputWidth 控制input宽度

查看源码在线预览

import { NumberPicker } from "@icedesign/base";
ReactDOM.render(
  <div>
    <NumberPicker inputWidth={"60px"} defaultValue={100000} />
  </div>,
  mountNode
);

最大最小值

当数据自动订正会触发 onCorrectmin max 来限制value的最大最小值。

查看源码在线预览

import { NumberPicker } from "@icedesign/base";
function onChange(value, e) {
  console.log(value, e);
}
function onDisabled(e) {
  console.log(e);
}
function onCorrect(obj) {
  console.log(obj);
}
ReactDOM.render(
  <div>
    <NumberPicker
      type="inline"
      step={3}
      min={6}
      max={30}
      defaultValue={6}
      onChange={onChange}
      onDisabled={onDisabled}
      onCorrect={onCorrect}
    />
  </div>,
  mountNode
);

步长

通过step控制每次加减步长

查看源码在线预览

import { NumberPicker } from "@icedesign/base";
function onChange(value) {
  console.log("changed", value);
}
function onCorrect(obj) {
  console.log(obj);
}
ReactDOM.render(
  <div>
    <NumberPicker onChange={onChange} onCorrect={onCorrect} step={0.01} />
  </div>,
  mountNode
);

相关区块

暂无相关区块