Как построить простой конвертер валют доллар / евро с фиксированным коэффициентом конвертации? - PullRequest
Новая
       1

Как построить простой конвертер валют доллар / евро с фиксированным коэффициентом конвертации?

0 голосов
/ 26 сентября 2019

Для упражнения мне нужно создать очень простой конвертер валют, который конвертирует валюту только из долларов в евро и наоборот с установленными курсами (0,91 / 1,09).Я хочу, чтобы мой файл App.js был как можно более модульным.Кроме того, я хочу использовать хуки (не компоненты класса)

Моя файловая структура: 

src
├── components (Holds all components)
│   ├── InputDollar.js (gets Dollar Input)
│   ├── InputEuro.js (gets Euro Input)
│   ├── Button.js (triggers conversion)
│   └── Converter.js (Converts Dollar into Euro or vice versa)
├── App.js (renders all components)
└── Index.js (eventually exports to html "root" id)

Я думаю, было бы слишком долго размещать весь код, который у меня пока есть, ноЯ делю песочницу: https://codesandbox.io/s/misty-morning-l3y1e?fontsize=14

Я думаю, что входы и кнопка в порядке.Наиболее вероятным недостатком является компонент-конвертер, которым я поделюсь ниже (поскольку я запутался, как передавать входные данные и как написать правильный синтаксис в операторе if), и компонент приложения, поскольку у меня возникают проблемы с отображением результата прикнопка Нажмите.

Converter.js 

import React from "react";
import InputDollar from "./InputDollar"
import InputEuro from "./InputEuro"


function ConvertedValue() {

  let converted = function() {
    if(<InputDollar>!="") {
      ConvertedValue = (<InputDollar />* 0.9)
    } else if (<InputEuro>!="") {
      ConvertedValue = (<InputEuro />* 1.1)
    }
  }

  return (
    <div>
      {converted}
    </div>
  );
}

export default ConvertedValue;

Можете ли вы помочь мне с этим упражнением и - по возможности - прокомментировать основные функции?

1 Ответ

1 голос
/ 26 сентября 2019

Вот как я бы подошел для адаптации существующего кода:

1) Один компонент <Input> для решения обеих причин.Он принимает как тип и метку, так и ваш handleChange метод. 

function Input(props) {

  const { label, type, handleChange } = props;

  function onChange(event) {

    // Pass in the type and value
    handleChange(type, event.target.value);
  }

  return (
    <div>
      <label>{label}</label>
      <input onChange={onChange} type="number" />
    </div>
  );
}

2) В вашем <App> компоненте: 

function App() {

  // Have one state for the converted value
  const [ convertedValue, setConvertedValue ] = useState(0);

  // Then, when `handleChange` is called, just choose between the
  // input type, and set the state
  function handleChange(type, value) {
    if (type === 'euro') setConvertedValue(value * 1.1);
    if (type === 'dollar') setConvertedValue(value * 0.9);
  }

  return (
    <div>

      // Using the Input component pass in the type, label, and handleChange
      // for the dollar and euro
      <Input type="dollar" label="Dollar" handleChange={handleChange} />
      <Input type="euro" label="Euro" handleChange={handleChange} />

      // Then you can keep the updated converted value here
      <div>{convertedValue}</div>
    </div>
  );
}

Надеюсь, это полезно.

Песочница

...