如何在 ReactJS 中创建货币转换器应用程序？

ReactJS 是一个流行的 JavaScript 库，用于构建单页应用程序。本文将介绍如何在 ReactJS 中使用实例创建一个货币转换器应用程序。我们将使用 Fixer.io API 来获取当前的货币汇率。

步骤

1. 安装 React 和相关组件

在终端中使用 npm 安装 React 和相关组件：

npm install react react-dom whatwg-fetch --save

2. 创建组件和 API 请求

创建一个名为 CurrencyConverter.js 的组件，并在其中添加以下代码：

import React from 'react';
import 'whatwg-fetch';

class CurrencyConverter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currencies: [],
      base: '',
      fromCurrency: '',
      toCurrency: '',
      amount: 0,
      exchangeRate: 0,
      result: 0,
      error: ''
    }
  }

  componentDidMount() {
    // 获取所有货币列表
    fetch('https://api.fixer.io/latest')
      .then(response => response.json())
      .then(data => {
        const { base, rates } = data;
        const currencies = Object.keys(rates);
        currencies.unshift(base);
        this.setState({ currencies, base });
      })
      .catch(error => {
        this.setState({ error: error.message });
      });
  }

  // API 请求获取汇率
  getExchangeRate = () => {
    const { fromCurrency, toCurrency } = this.state;
    fetch(`https://api.fixer.io/latest?base=${fromCurrency}&symbols=${toCurrency}`)
      .then(response => response.json())
      .then(data => {
        const exchangeRate = data.rates[this.state.toCurrency];
        this.setState({ exchangeRate });
      })
      .catch(error => {
        this.setState({ error: error.message });
      });
  }

  // 处理输入框中的事件
  handleInputs = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value }, this.getExchangeRate);
  }

  // 处理提交事件
  handleSubmit = event => {
    event.preventDefault();
    const { amount, exchangeRate } = this.state;
    const result = (amount * exchangeRate).toFixed(2);
    this.setState({ result: result });
  }

  render() {
    const { currencies, base, fromCurrency, toCurrency, amount, result, error } = this.state;

    if (error) {
      return <div>{error}</div>;
    }

    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label htmlFor="from-currency">From Currency</label>
          <select id="from-currency" name="fromCurrency" value={fromCurrency} onChange={this.handleInputs}>
            {currencies.map(currency => <option key={currency} value={currency}>{currency}</option>)}
          </select>
        </div>
        <div>
          <label htmlFor="to-currency">To Currency</label>
          <select id="to-currency" name="toCurrency" value={toCurrency} onChange={this.handleInputs}>
            {currencies.map(currency => <option key={currency} value={currency}>{currency}</option>)}
          </select>
        </div>
        <div>
          <label htmlFor="amount">Amount</label>
          <input id="amount" type="number" min="0" name="amount" value={amount} onChange={this.handleInputs} />
        </div>
        <button type="submit">Convert</button>
        <div>Result: {result}</div>
      </form>
    );
  }
}

export default CurrencyConverter;

我们在组件中定义了一些常用的状态，例如：所有可选货币列表，基础货币，输入金额、源货币和目标货币，以及计算结果和错误消息。组件使用了 React 的 componentDidMount() 生命周期钩子来获取所有的货币列表并将其存储在 this.state.currencies 中。我们还定义了两个方法来获取汇率和处理表单的事件。

3. 渲染组件

现在，我们可以在另一个组件或应用程序中渲染我们的 CurrencyConverter 组件。在你的主文件中，引入 CurrencyConverter 组件并将其呈现在 DOM 上：

import React from 'react';
import ReactDOM from 'react-dom';
import CurrencyConverter from './components/CurrencyConverter';

ReactDOM.render(
  <CurrencyConverter />,
  document.getElementById('root')
);

在这个例子中，我们将 CurrencyConverter 组件呈现在 HTML 的 <div id="root"></div> 中。

结论

在本文中，我们介绍了如何在 ReactJS 中创建一个货币转换器应用程序。我们使用了 Fixer.io API 来获取当前的货币汇率，并使用 React 的一些常见组件和生命周期方法来处理表单事件和渲染界面。