#javascript #reactjs
Вопрос:
Я построил конвертер валют и хочу, чтобы рядом с аббревиатурой валюты также отображался флаг! Я получаю курсы валют из API, но не могу найти, как я могу отображать флаги рядом с ними! Я попытался создать script.js файл, включающий флаги, но не сработал! Я думаю, это довольно просто, однако я потратил много времени, чтобы найти способ!
Изображение приложения Конвертера
Код для компонента преобразователя:
constructor(props) {
super(props)
this.state = {
currencyInput: 'USD',
currencyOutput: 'EUR',
amountInput: 0,
amountOutput: 0,
options: []
}
}
handleChange = event => {
const target = event.target
const value = target.value
const name = target.name
this.setState({ [name]: value })
}
handleSubmit = event => {
event.preventDefault () //Preventing form from submitting
fetch(`http://api.exchangeratesapi.io/v1/latest?access_key=my-token`)
.then(res => res.json())
.then(data => {
const rateFromEuroToInput = data.rates[this.state.currencyInput]
const inputInEuros = this.state.amountInput / rateFromEuroToInput
const rateFromEuroToOutput = data.rates[this.state.currencyOutput]
const eurosInOutput = inputInEuros * rateFromEuroToOutput
this.setState({ amountOutput: eurosInOutput })
})
}
componentDidMount() {
fetch(`http://api.exchangeratesapi.io/v1/latest?access_key=API KEY`)
.then(res => res.json())
.then(data => {
const currencyOptions = Object.keys(data.rates)
this.setState({ options: currencyOptions })
})
}
render() {
return (
<>
<div className="card card-body p-3 mb-3 bg-light text-dark">
<h1 className="mb-4">Currency Converter</h1>
<form onSubmit={this.handleSubmit}>
<div className="d-flex">
<div className="form-row col-md-6 col-sm-6 offset-1">
<div className="form-group col-md-8">
<div className="mb-2">
<label><strong>Currency I Have</strong></label>
</div>
<select className="form-select"
type="text"
name='currencyInput'
value={this.state.currencyInput}
onChange={this.handleChange}
>
{this.state.options.map(option => {
return <option value={option}>{option}</option>
})
}
</select>
</div>
<div className="form-group col-md-8 mt-4">
<div className="mb-2">
<label><strong>Amount</strong></label>
</div>
<input className="form-control"
name="amountInput"
type="number"
value={this.state.amountInput}
onChange={this.handleChange}
/>
</div>
</div>
<div className="form-row col-md-6 col-sm-6">
<div className="form-group col-md-8">
<div className="mb-2">
<label><strong>Currency I Want</strong></label>
</div>
<select className="form-select"
type="text"
name='currencyOutput'
value={this.state.currencyOutput}
onChange={this.handleChange}
>
{this.state.options.map(option => {
return <option value={option}>{option}</option>
})
}
</select>
</div>
<div className="form-group col-md-8 mt-4">
<div className="mb-2">
<label><strong>Amount</strong></label>
</div>
<input className="form-control"
name="amountOutput"
type="number"
value={this.state.amountOutput}
onChange={this.handleChange}
/>
</div>
</div>
</div>
<br/>
<button type="submit" className="btn btn-primary mb-2">Convert</button>
</form>
</div>
</>
)
}
}
export default Converter```
I would like to give any suggestion how to implement the flags with in the currency rows!
Thank you!
Комментарии:
1. Где вы берете флаги?
2. @Синан Яман В том-то и суть вопроса! Я получаю курсы валют динамически, но не могу найти способ сопоставить флаги рядом с ними? У меня еще нет флагов в моем проекте!
3. Похоже, вашему вопросу нужно немного больше внимания. Предоставленный код ничего не дает для ответа на вопрос, так ли это. Попробуйте заглянуть в некоторые библиотеки, подобные этой
Ответ №1:
вы можете исправить это, загрузив все изображения валют, которые вы будете использовать, и после этого создайте объект, который свяжет key: symbol; value: 'path-to-image'
Пожалуйста, ознакомьтесь с этим, чтобы узнать, как отображать значок внутри ввода
И обратитесь к этому, чтобы узнать, как включать изображения в React
Насколько я понимаю, конкретное решение может быть таким
// * Download all currency flags that you will use and add them to public directory
const mapSymbolToFlag = {
'ALL': 'path-to-public-directory/all.ico',
'EUR': 'path-to-public-directory/eur.ico'
}
// * so on and so forth
Создайте компонент ввода, чтобы скрыть все детали о том, как поместить изображение/значок на ввод и сопоставление, и включите этот компонент ввода, который вы создадите в основном компоненте валюты с символом в качестве ввода/реквизита
Ответ №2:
У меня есть несколько моментов, которые я хочу выделить:
- Способ решить эту проблему-создать словарь, в котором вы можете определить флаг с помощью валюты.
- Создание компонента, в который вы отправляете валюту, может быть хорошей практикой для реализации словаря
- Существуют валюты, в которых их используют многие страны, поэтому в этом случае вам нужно определить флаг или адаптировать свой компонент, чтобы показывать флаги, в которых применяется валюта.
- В вашем примере вы переопределяете состояние и удаляете информацию о своем начальном состоянии, вам нужно добавить setState({…состояние, }), а затем новые вещи.
Вот мои фрагменты кода, которые вам нужно изменить:
...
handleChange (event) {
const target = event.target;
const value = target.value;
const name = target.name;
// add `...state` to avoid remove all your previous information
setState({ ...state, [name]: value });
};
...
...
handleSubmit(event) {
event.preventDefault(); //Preventing form from submitting
fetch(`http://api.exchangeratesapi.io/v1/latest?access_key=my-token`)
.then(res => res.json())
.then(data => {
const rateFromEuroToInput = data.rates[state.currencyInput]
const inputInEuros = state.amountInput / rateFromEuroToInput
const rateFromEuroToOutput = data.rates[state.currencyOutput]
const eurosInOutput = inputInEuros * rateFromEuroToOutput
// add ...state to avoid remove all your previous information
setState({ ...state, amountOutput: eurosInOutput })
})
};
...
...
render() {
<>
<div className="card card-body p-3 mb-3 bg-light text-dark">
<h1 className="mb-4">Currency Converter</h1>
<form onSubmit={handleSubmit}>
<div className="d-flex">
<div className="form-row col-md-6 col-sm-6 offset-1">
<div className="form-group col-md-8">
<div className="mb-2">
<label>
<strong>Currency I Have</strong>
</label>
</div>
<select
className="form-select"
type="text"
name="currencyInput"
value={state.currencyInput}
onChange={handleChange}
>
{state.options.map((option) => {
return <option value={option}>{option}</option>;
})}
</select>
{/* HERE GOES YOUR NEW COMPONENT */}
<Flags currency={state.currencyInput} />
</div>
...
}
Я нашел API изображений, в котором вы можете определить флаг, используя его код
страны Флаги стран
Используя это, я сделал этот компонент
import React from 'react';
import flagsData from '../../mocks/flags.json';
const FLAG_URL = 'https://www.countryflags.io';
const { flagsFromCurrency, styles, sizes } = flagsData;
const Flags = ({ currency, style = styles.FLAT, size = sizes['16'] }) => {
return (
<img
src={`${FLAG_URL}/${flagsFromCurrency[currency]}/${style}/${size}.png`}
alt={flagsFromCurrency[currency]}
/>
);
};
export default Flags;
Это и есть результат:
И вы можете взглянуть на код, который я сделал здесь
Я надеюсь, что это сработает для вас.
Обновление: Я реализовал стили начальной загрузки.