汇率计算器 by React
发布时间：2020-12-15 06:31:57 所属栏目：百科 来源：网络整理
导读：先上一张图片 功能实现 既然React的卖点是组件化（话说昨天面试小姐姐问React除了组件化还有什么，我居然忘了 声明式 ，悔しい）。上图是自己的划分思路： 首先粉色部分（①区）显示的是实时汇率，初始值是美元和欧元的汇率比，当改变④或⑤，或者点击⑥时，
先上一张图片
功能实现
既然React的卖点是组件化（话说昨天面试小姐姐问React除了组件化还有什么，我居然忘了声明式，悔しい）。上图是自己的划分思路：
关于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文件就能使用了。 至于为什么当时想到了做一个汇率计算器，可能就是下图吧：
以上、よろしく。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |