# InputNumber

用于数字输入

如果设置了最小值，可以全部选中数据进行删除。

## 案例演示

### InputNumber 基本用法

---demo
```js
import { InputNumber } from 'amos-framework';

function handleChange(value){
  console.log('onChange', value);
}

class Demo extends Component {

  render() {
    return (
      <div>
        <InputNumber size="sm" onChange={handleChange} />
        <InputNumber onChange={handleChange} />
        <InputNumber size="lg" onChange={handleChange} />
        <InputNumber min={10} size="lg" onChange={handleChange} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### InputNumber 范围、步数

---demo
```js
import { InputNumber } from 'amos-framework';

class Demo extends Component {

  render() {
    return (
      <div>
        <InputNumber max={20} min={-5} />
        <InputNumber max={20} min={-6} step={2} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### InputNumber 步数为小数

---demo
```js
import { InputNumber } from 'amos-framework';

class Demo extends Component {

  render() {
    return (
      <div>
        <InputNumber step={0.01} />
        <InputNumber step={0.01} type="outer" />
        <InputNumber step={0.01} type="nocontrol" />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### InputNumber 控制

通过设置 value 为 undefined 以清空数据

---demo
```js
import { InputNumber } from 'amos-framework';

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 10
    };
  }

  onChange = (value) => {
    this.setState({
      value
    });
  }

  render() {
    const { value } = this.state;
    return (
      <div>
        <InputNumber value={value} onChange={this.onChange} />
        <Button onClick={() => this.onChange()}>清空</Button>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### InputNumber type 类型

---demo
```js
import { InputNumber } from 'amos-framework';

class Demo extends Component {

  render() {
    return (
      <div>
        <InputNumber type="outer" />
        <InputNumber type="outer" max={20} min={-5} />
        <InputNumber type="nocontrol" />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### InputNumber addon

`beforeAddon` 支持一个 `function`，用以动态控制显示。

---demo
```js
import { InputNumber, Icon } from 'amos-framework';

class Demo extends Component {

  render() {
    return (
      <div>
        <InputNumber type="outer" beforeAddon="X" />
        <InputNumber beforeAddon="Y" />
        <InputNumber beforeAddon={<Icon icon="shuoming" />} />
        <InputNumber type="outer" size="sm" beforeAddon="X" />
        <InputNumber size="sm" beforeAddon={<Icon icon="frown" />} />
        <InputNumber beforeAddon={({ value }) => <Icon icon={value > 3 ? 'meho' : 'frown'} color="red" />} />
        <InputNumber type="outer" size="lg" beforeAddon="X"/>
        <InputNumber size="lg" beforeAddon={<Icon icon="user" />} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### InputNumber useString

使用 `useString=true` 时，输入框的值为字符串，可以输入小数，以及支持超过16位的数字。

> 注意 该模式下，onChange 的返回值为 string 类型数字。

---demo
```js
import { InputNumber, Flex, Checkbox } from 'amos-framework';

class Demo extends Component {
  state = {
    value: 0.123456789,
    useString: true
  };

  onChange = (value) => {
    console.log(value);
    this.setState({ value });
  }

  toggleUseString = (e) => {
    this.setState({ useString: e.target.checked });
  }

  render() {
    const { value, useString } = this.state;

    return (
      <div>
        <Flex vertical gap={16} inline>
          <Checkbox checked={useString} onChange={this.toggleUseString}>Use String</Checkbox>
          <InputNumber value={value} step={useString ? '0.0000000001' : 1} useString={useString} onChange={this.onChange} />
        </Flex>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## props

| params  | type | default | description |
| --- | --- | --- | --- |
| prefixCls | string | `amos-input-number` | css class 前缀 |
| className | string | - | css class |
| value | ReactText | - | 输入框的值 |
| defaultValue | ReactText | - | 初始化输入框的值, 不可控 |
| disabled | boolean | false | 是否禁用 |
| onChange | function | - | 输入改变后的回调，参数为 value 值 |
| step | string or number | - | 递增跨度 |
| max | number | - | 最大值 |
| min | number | - | 最小值 |
| beforeAddon | `ReactNode or func: (state, props) => ReactNode` | - | 前缀图标，或者字符 |
| style | Object | - | 自定义样式 style， 会同步设置到外层 div 和 内部的 Input 组件 |
| iptStyle | Object | - | 自定义 Input 样式 style， 会覆盖 `style` 中的值， 如： `style={width: 200, marginLef: 16}, iptStyle={marginLef: 0}`, 最终 Input 组件的 `style={width: 200, marginLef: 0}` |
| strictMode | Boolean | false | 设置为 true 时，则不给 `input` 标签添加 `type='number'`, 由于 `<input type='number'>` 在初始输入 `E or e` 或单个 `E or e` 时不会触发 onChange，体验不好。 |
| useString | Boolean | false | 设置为 true 时，则不给 `input` 标签添加 `type='number'`, 此时可以支持高精度小数，以及超过16位的数字。注意，该模式下，onChange返回的 value 值是 string 类型。 |

Input 的其他属性和 React 自带的 [input](https://facebook.github.io/react/docs/events.html#supported-events) 一致。

* method

`forceUpdateState` 部分场景下，发现从外部直接修改了 value 值，组件的内部 state 值依然是上一次的值，但是 `props.value` 并未变化，导致数据不一致，此时可以通过该方法强制更新 state 值。同时，也需要自行处理 props 值，保持 state 与 props 一致的情况。

> 注意：useString 的优先级高于 strictMode，如果 useString 为 true，则 value 将采用 string 类型进行传递。