汇率计算器 by React

React 前端之家
前端之家收集整理的这篇文章主要介绍了汇率计算器 by React，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

先上一张图片

功能实现

既然React的卖点是组件化（话说昨天面试小姐姐问React除了组件化还有什么，我居然忘了声明式，悔しい）。上图是自己的划分思路：

  1. 首先粉色部分（①区）显示的是实时汇率，初始值是美元和欧元的汇率比，当改变④或⑤，或者点击⑥时，①区根据当前状态进行实时切换，而②和③区的改变是不会影响①区的；
  2. ②和③区可以输入数字，根据目前选定的汇率，来实时换算货币值，比如就上图来说，在②区输入10，③区会实时变成8.12304；
  3. ④和⑤区是整个组件的核心，它们的值决定着其他各组件的方方面面；
  4. 当点击⑥区时，④和⑤当前选定的值会交换，②区值不会变，但因为汇率发生了变化，③区的值将发生变动，此时①区的汇率也将发生反转；
  5. 当然最外层的App类控制api的异步加载。

关于API

这里必须得多说几句，简直炸毛。

首先是在fixer申请了key，还不错，看下图。然鹅坑爹的是，他们家不提供货币全称API(比如USD对应United States Dollor；CNY对应Chinese Yuan酱紫)。虽然做这个项目只需要实时汇率就足够了，但是只显示干巴巴的简称肯定是不友好滴。

然后又去了currencylayer申请了key，货币全称倒是有了，看下图，但他家的汇率api超级坑爹，免费用户只能以美金为base货币，不像fixer无限制。遂两家api一起用...

具体实现

App类

名字懒得起了，就叫App好了，这个类主要用来异步加载两个json文件，第一次用到了fetch，听说能代替传统的Ajax，与之类似的还有什么axois、superagent,忙过这几天依次做一下研究。

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {ratesObj: '',countriesObj: ''};
    }

    componentDidMount() {

        // 注意fetch的语法，其实跟Promise差不多少
        this.getCurrencyRates = fetch(this.props.api.getCurrencyRatesAPI).then(res => {
            res.json().then(resJSON => this.setState({ratesObj: resJSON.rates}));

        });

        this.getCountries = fetch(this.props.api.getCountriesAPI).then(res => {
            res.json().then(resJSON => this.setState({countriesObj: resJSON.currencies}));

        });
    }

    componentWillUnmount() {
        this.getCurrencyRates.abort();
        this.getCountries.abort();
    }

    render() {
        return (
            <div>
                <CountryChoice ratesObj={this.state.ratesObj} countriesObj={this.state.countriesObj}/>
            </div>
        )
    }
}

ReactDOM.render(
    // 这里的api是个对象，存放上面所说的两个url，这里就不贴出来了
    <App api={api}/>,document.getElementById('root'),);

实时汇率展示类

这个类就是个受，自己啥都干不了。当select元素触发onchange事件抑或button被点击(触发onclick事件)时，这里就会发生变动。这个类只需要接受CountryChoice类（就是上面说到的核心类）的三个参数，分别是示意图中④和⑤区正在被选中的那两个币种，还有就是两个币种之间的汇率。

class CurrentExchangeRate extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <h1>1 <span
                className="exchange-country-name">{this.props.firstSelectedCountry}</span> = {this.props.latestRates + ' '}
                <span className="exchange-country-name">{this.props.secondSelectedCountry}</span>
            </h1>
        );
    }
}

exchange按钮类

这个类接受一个Boolean类型的flag，flag的定义同样是在CountryChoice类里面，每点击一次按钮，flag值就会从true和false之间切换，然后通过this.props.buttonToggle这个方法将实时的flag值传递回CountryChoice类，当然this.props.buttonToggle方法定义在CountryChoice类里，下面会说到。

// exchange按钮交换两个select，同时会改变 实时汇率展示 模块
class ChangeCountry extends React.Component {
    constructor(props) {
        super(props);
        this.state = {currentFlag: this.props.currentFlag};
        this.buttonClick = this.buttonClick.bind(this);
    }

    buttonClick() {
        // 一定要把 !this.state.currentFlag 先存到一个变量，再把这个变量赋值到setState里
        // 否则第一次点击按钮还是true，第二次才变成false
        const currentFlag = !this.state.currentFlag;
        this.setState({
            currentFlag: currentFlag
        });
        this.props.buttonToggle(currentFlag);
    }

    render() {
        return (
            <button className="button" onClick={this.buttonClick}>Exchange</button>
        )
    }
}

金额输入类

首先先写一个isNumber方法，是为了阻止用户输入非数字，且只能输入一个小数点。因为有两个input元素，所以先给两个元素命名。因为在任意一个input中输入值都会实时影响到另一个，所以这里就涉及到了<mark>状态提升</mark>问题，可以去研究官方文档-状态提升的这个例子。

// 命名两个input输入框
const inputNames = {f: 'firstInput',s: 'secondInput'};

function isNumber(input) {
    if (/^[0-9]+([.][0-9]*)?$/.test(input) === false) {
        return input.slice(0,-1)
    } else {
        return input
    }
}

class MoneyInput extends React.Component {

    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(ev) {
        this.props.onInputChange(isNumber(ev.target.value));
    }

    render() {
        const inputName = this.props.inputName;
        const inputValue = this.props.inputValue;

        return (
            // 这里用到了ES6的计算属性名
            <input name={inputNames[inputName]} className="input-value" type="text" value={inputValue}
                   placeholder="0" onChange={this.handleChange}/>
        );
    }
}

币种（国家）选择类

高潮来了，额，重点来了。这个类控制着币种的选择，解释都放在了注释里，代码写得有点儿绕，都是exchange按钮惹的祸。写下来发现React的一个重点就是React 组件间通讯:

  • 【父组件】向【子组件】传值；
  • 【子组件】向【父组件】传值；
  • 没有任何嵌套关系的组件之间传值（如：兄弟组件之间传值）

这里推荐两篇文章，一个是淘宝前端团队的React 组件间通讯;另一个是在SegmentFault的一篇文章React 组件之间如何交流，把人家演示的例子敲一敲，基本上就能理解了。

// 货币选择：初始化第一个选中的是美刀，第二个选中的欧元
// 货币选择的变化影响着 汇率展示 和 汇率计算
class CountryChoice extends React.Component {
    constructor(props) {
        super(props);

        // 初始化状态
        this.state = {
            firstSelectedCountry: 'USD',// 第一个默认被选中的币种是美金
            secondSelectedCountry: 'EUR',// 第二个默认被选中的币种是欧元
            flag: true,// 立一个flag，初始是true，button被点击时在true和false之间切换
            inputName: 'f',// 默认选中的是第一个input标签
            inputValue: ''// 默认input标签的值是空
        };

        this.handleChange = this.handleChange.bind(this);
        this.buttonToggle = this.buttonToggle.bind(this);
        this.firstInputChange = this.firstInputChange.bind(this);
        this.secondInputChange = this.secondInputChange.bind(this);
    }

    // 通过ChangeCountry类传递过来的flag值来设置成当前状态
    buttonToggle(flag) {
        this.setState({flag: flag})
    }

    // 设置select标签的状态

    // 当flag是true时，把firstSelectedCountry的状态设置为name属性为“first-select”的value，
    // 把secondSelectedCountry的状态设置为name属性为“second-select”的value

    // 当flag是true时，把firstSelectedCountry的状态设置为name属性为“first-select”的value，
    // 把secondSelectedCountry的状态设置为name属性为“second-select”的value

    // 也就是说当flag是false时，此时name属性为“first-select”的select标签控制的是name属性为“second-select”的select标签
    // 当然我这里设计的不合理，应该通过动态修改name值才好，放在下一次的项目迭代吧，留个坑先
    handleChange(ev) {
        const target_name = ev.target.name;

        if (this.state.flag) {
            if (target_name === 'first-select') {
                this.setState({firstSelectedCountry: ev.target.value});
            } else if (target_name === 'second-select') {
                this.setState({secondSelectedCountry: ev.target.value});
            }

        } else {
            if (target_name === 'first-select') {
                this.setState({secondSelectedCountry: ev.target.value});
            } else if (target_name === 'second-select') {
                this.setState({firstSelectedCountry: ev.target.value});
            }
        }
    }

    // 获取第一个input输入的值
    firstInputChange(inputValue) {
        this.setState({inputName: 'f',inputValue});
    }

    // 获取第二个input输入的值
    secondInputChange(inputValue) {
        this.setState({inputName: 's',inputValue});
    }


    render() {

        const inputName = this.state.inputName;
        const inputValue = this.state.inputValue;

        // 因为要用到用户输入的值乘以汇率来进行计算
        // 当用户清空某个input标签的值时，这里就成了NaN
        // 这个函数就是当检测到输入的值为空时，自动设为数字0
        // 啊啊啊，肯定有更好的方法
        function formatInputValue(inputValue) {
            if (inputValue === '') {
                inputValue = 0;
                return inputValue
            } else {
                return parseFloat(inputValue)
            }
        }

        // 这边就写的很笨重了，汇率是根据flag的状态定的
        // 如果是true，汇率是第二个select标签选中的值除以第一个select
        // 假设当前在第一个input输入数值，那么下面的 inputName === 'f' 就是true， 所以第二个input的值（sI）就会被实时计算
        // 反正就是很绕，如果不加exchange按钮要省很多事儿，一切都是为了学习...
        const fI = inputName === 's' ? formatInputValue(inputValue) * (!this.state.flag ? this.props.ratesObj[this.state.secondSelectedCountry] / this.props.ratesObj[this.state.firstSelectedCountry] : this.props.ratesObj[this.state.firstSelectedCountry] / this.props.ratesObj[this.state.secondSelectedCountry]) : inputValue;
        const sI = inputName === 'f' ? formatInputValue(inputValue) * (this.state.flag ? this.props.ratesObj[this.state.secondSelectedCountry] / this.props.ratesObj[this.state.firstSelectedCountry] : this.props.ratesObj[this.state.firstSelectedCountry] / this.props.ratesObj[this.state.secondSelectedCountry]) : inputValue;

        return (
            <div className="container">
                {/*这边就是把当前状态（两个被选中的货币全称和之间的汇率）传递给①区来显示*/}
                <CurrentExchangeRate
                    firstSelectedCountry={this.state.flag ? this.props.countriesObj[this.state.firstSelectedCountry] : this.props.countriesObj[this.state.secondSelectedCountry]}
                    secondSelectedCountry={!this.state.flag ? this.props.countriesObj[this.state.firstSelectedCountry] : this.props.countriesObj[this.state.secondSelectedCountry]}
                    latestRates={this.state.flag ? this.props.ratesObj[this.state.secondSelectedCountry] / this.props.ratesObj[this.state.firstSelectedCountry] : this.props.ratesObj[this.state.firstSelectedCountry] / this.props.ratesObj[this.state.secondSelectedCountry]}
                />

                {/*当在第二个input输入数字时，换算出来的值会实时显示在第一个input里*/}
                <div className="item">
                    <MoneyInput
                        inputName='f'
                        inputValue={fI}
                        onInputChange={this.firstInputChange}
                    />

                    {/*传统设置默认选项是在option标签设置selected=selected,现在放在select标签里，当然还有个Select的三方库*/}
                    {/*通过map将option标签循环添加到第一个select标签里面*/}
                    <select className="select" name="first-select"
                            value={this.state.flag ? this.state.firstSelectedCountry : this.state.secondSelectedCountry}
                            onChange={this.handleChange}>
                        {
                            Object.keys(this.props.ratesObj).map((key) => (
                                <option key={key.toString()}
                                        value={key}>{key} - {this.props.countriesObj[key]}</option>))
                        }
                    </select>
                </div>
                <div className="item">
                    // 当在第一个input输入数字时，换算出来的值会实时显示在第二个input里
                    <MoneyInput
                        inputName='s'
                        inputValue={sI}
                        onInputChange={this.secondInputChange}
                    />

                    {/*通过map将option标签循环添加到第一个select标签里面*/}
                    <select className="select" name="second-select"
                            value={!this.state.flag ? this.state.firstSelectedCountry : this.state.secondSelectedCountry}
                            onChange={this.handleChange}>
                        {
                            Object.keys(this.props.ratesObj).map((key) => (
                                <option key={key.toString()}
                                        value={key}>{key} - {this.props.countriesObj[key]}</option>))
                        }
                    </select>

                    {/*exchange按钮 将当前flag值传递给ChangeCountry类，同时将ChangeCountry类改变的flag值作为参数，通过buttonToggle方法传回当前这个类*/}
                    <ChangeCountry currentFlag={this.state.flag} buttonToggle={flag => this.buttonToggle(flag)}/>
                </div>

            </div>
        )
    }
}

　写在最后

项目写的很丑，随着学习的深入还要进行迭代，加油吧。项目传到了github上了，没有劳驾node服务器，fork下来直接打开html文件就能使用了。

至于为什么当时想到了做一个汇率计算器，可能就是下图吧：

以上、よろしく。

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作