Currency 货币输入框

货币输入框。

何时使用

当用户需要输入货币类型值时。

代码演示

基本使用

基本使用。

import React from 'react';
import ReactDOM from 'react-dom';
import { Currency, Row, Col } from 'choerodon-ui/pro';
​
ReactDOM.render(
  <div>
    <Row gutter={10}>
      <Col span={12}>
        <Currency defaultValue={10000} />
      </Col>
      <Col span={12}>
        <Currency currency="CNY" defaultValue={10000} />
      </Col>
    </Row>
  </div>,
  document.getElementById('container')
);
​

受控货币输入框

受控货币输入框

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Currency } from 'choerodon-ui/pro';
​
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 100,
    };
  }
​
  handleChange = (value, oldValue) => {
    console.log('[newValue]', value, '[oldValue]', oldValue);
    this.setState({
      value,
    });
  }
​
  render() {
    return <Currency value={this.state.value} onChange={this.handleChange} />;
  }
}
​
ReactDOM.render(
  <App />,
  document.getElementById('container')
);

数据源

绑定数据源。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Currency } from 'choerodon-ui/pro';
​
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log('[dataset newValue]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
}
​
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'money', type: 'number', defaultValue: 100000000000000, required: true, currency: 'USD' },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
​
  render() {
    return <Currency dataSet={this.ds} name="money" />;
  }
}
​
ReactDOM.render(
  <App />,
  document.getElementById('container')
);

精度控制

根据字段值，控制值显示及精度。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Currency, NumberField, Row, Col } from 'choerodon-ui/pro';
​
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log('[dataset newValue]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
}
​
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'precision', type: 'number', defaultValue: 4, min: 0, max: 100 },
      { name: 'money', type: 'number', defaultValue: 1000000.123, required: true },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
​
  render() {
    return (
      <Row gutter={10}>
        <Col span="12">
          <NumberField placeholder="精度" dataSet={this.ds} name="precision" />
        </Col>
        <Col span="12">
          <Currency 
            dataSet={this.ds} 
            name="money" 
            renderer={({ value, record }) => {
              // 仅为示例，具体精度处理根据需求调整

API

Currency

更多属性请参考 NumberField。

Static method