@ ericblade/ react- 货币输入

货币输入的现代反应组件. 叉从 https://github.com/jsillitoe/react-货币投入

支持自定义小数和千位分隔符以及精确度.

输入时格式独特,包括小数和千分数,精度,前缀和后缀. 我还没有找到任何其他的货币投入来做这件事, 并且原作已经很久没有被触动过,所以我叉了这个.

原作以来的变化

• 现在在类型脚本中
• 支持反应 16、17、18、19
• 全新的自动测试设置 齐压 Playwright (1.4.2+中新建) (中文(简体) )
• 自动化测试设置更加彻底
• Cart选取重装 似乎到处都行
• 用于处理 Gboard 的问题

测试整个反应版本

此套件可在当地针对回放16至19进行测试:

npm run test:react16
npm run test:react17
npm run test:react18
npm run test:react19

全部按顺序运行 :

npm run test:matrix

代码演示

有一个代码Pen,你可以用它来观察动作中的组件, 玩它的所有参数来观察它是如何工作的。 它用React和TypeScript来写. 代码链接

有第二个 CodePen, 它在源代码的"示例"目录中反映了演示应用: 代码链接

以下预叉读取

变动

页:1

• 被贬"上变"选取"上变". 此修改参数顺序以更好地匹配 React 默认的输入处理
• 更新的依赖关系
• 已添加解析Float多填充
• 处理活动汇集问题的持久活动
• 其他错误修正 .

安装

npm install @ericblade/react-currency-input --save

一体化

您可以存储您状态中的更改处理器所传递的值 .

import React from 'react'
import CurrencyInput from '@ericblade/react-currency-input';

const MyApp = React.createClass({
    getInitialState(){
        return ({amount: "0.00"});
    },

    handleChange(event, maskedvalue, floatvalue){
        this.setState({amount: maskedvalue});
    },
    render() {
        return (
            <div>
                <CurrencyInput value={this.state.amount} onChangeEvent={this.handleChange}/>
            </div>
        );
    }
});
export default MyApp

您也可以指定一个引用, 然后使用调用调用 MaskedValue () 访问该值 .

import React from 'react'
import CurrencyInput from '@ericblade/react-currency-input';

const MyApp = React.createClass({
    handleSubmit(event){
        event.preventDefault();
        console.log(this.refs.myinput.getMaskedValue())
    },
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <CurrencyInput ref="myinput" />
            </form>
        );
    }
});
export default MyApp

分离器和精度

指定自定义小数和千位分隔符 :

    // 1.234.567,89
    <CurrencyInput decimalSeparator="," thousandSeparator="." />

指定具体精确度 :

    // 123,456.789
    <CurrencyInput precision="3" />

    // 123,456,789
    <CurrencyInput precision="0" />

货币

可选设置货币符号作为前缀或后缀

    // $1,234,567.89
    <CurrencyInput prefix="$" />

    // 1,234,567.89 kr
    <CurrencyInput suffix=" kr" />

在前缀之前出现负数

    // -$20.00
    <CurrencyInput prefix="$" value="-20.00" />

所有其他属性都应用于输入元素. 例如,可以集成靴子纹章:

    <CurrencyInput className="form-control" />

选项

* 联合国说明: 启用任何与口罩相关的特性,例如前缀,后缀或带有输入Type="数字"或"tel"的分隔符,都可能触发出错. 在这些输入类型中,大多数字符无效.