reactjs 将货币更改从货币菜单应用到预算应用程序的其余部分

vh0rcniy 于 12个月前发布在 React

关注(0)|答案(2)|浏览(97)

我正在为一个在线课程的JS项目工作，我正在创建一个预算应用程序
我的应用程序包含以下组件
1.预算
1.剩余
1.迄今支出
1.分配预算
1.变更分配
我的任务是为应用程序“CurrencyDropdown”创建第六个组件，以容纳不同的货币选项供选择。我已经做到了这一点。

// CurrencyDropdown.js

import React, { useState } from 'react';
 
const CurrencyDropdown = () => {
const [selectedCurrency, setSelectedCurrency] = useState('$'); // Default currency

const handleCurrencyChange = (event) => {
setSelectedCurrency(event.target.value);
};
return (
<div className='alert alert-primary'>
<label htmlFor="currency">Currency:</label>
<select id="currency" value={selectedCurrency} onChange={handleCurrencyChange}>
<option value="$">$ Dollar</option>
<option value="£">£ Pound</option>
<option value="€">€ Euro</option>
<option value="₹">₹ Rupee</option> 
{/* Add more currency options as needed */}
</select>
</div>
);
};
export default CurrencyDropdown;

字符串
下一个任务是向项目中添加代码，以便当您从CurrencyDropdown更改货币时，应用程序中所有其他组件上显示的货币都会更改以匹配所选货币。
我尝试创建一个新的JS组件CurrencyContext：

// CurrencyContext.js

import React, { createContext, useContext, useState } from 'react';

const CurrencyContext = createContext();

export const CurrencyProvider = ({ children }) => {
const [selectedCurrency, setSelectedCurrency] = useState('USD');

const changeCurrency = (currency) => {
setSelectedCurrency(currency);
};

return (
<CurrencyContext.Provider value={{ selectedCurrency, changeCurrency }}>
      {children}
</CurrencyContext.Provider>
);
};

export const useCurrency = () => {
return useContext(CurrencyContext);
};

型
我不知道如何或在哪里应用这个组件来影响我的应用程序的其余部分的变化。

reactjs

来源：https://stackoverflow.com/questions/77765754/applying-currency-change-from-currency-dropdown-menu-to-the-rest-of-my-budgeting

2条答案

按热度按时间

ulydmbyx1#

要在应用的其余部分使用CurrencyProvider和useCurrency，您需要使用CurrencyProvider Package 整个应用程序或其相关部分。这将使selectedCurrency和changeCurrency可用于嵌套在其中的所有组件。

//index.js

ReactDOM.render(
  <React.StrictMode>
    <CurrencyProvider>
      <App />
    </CurrencyProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

字符串
像这样用currencyProvider Package 整个应用程序，这将影响整个应用程序的变化。

赞(0）回复(0）举报 12个月前

zrfyljdw2#

要使用CurrencyContext.js，请使用<CurrencyProvider/> Package 应用程序
例如

<CurrencyProvider>
  <CurrencyDropdown />
  <Remaining />
</CurrencyProvider>

字符串
这将允许其他组件使用您的货币上下文。请注意，所有使用CurrencyContext的组件都应该是CurrencyProvider的子组件
您现在可以在CurrencyDropdown.js中使用selectedCurrency和changeCurrency

// CurrencyDropdown.js

import React, { useState } from "react";
import { useCurrency } from "./CurrencyProvider";

const CurrencyDropdown = () => {
  const { selectedCurrency, changeCurrency } = useCurrency();

  const handleCurrencyChange = (event) => {
    changeCurrency(event.target.value);
  };
  return (
    <div className="alert alert-primary">
      <label htmlFor="currency">Currency:</label>
      <select
        id="currency"
        value={selectedCurrency}
        onChange={handleCurrencyChange}
      >
        <option value="$">$ Dollar</option>
        <option value="£">£ Pound</option>
        <option value="€">€ Euro</option>
        <option value="₹">₹ Rupee</option>
        {/* Add more currency options as needed */}
      </select>
    </div>
  );
};
export default CurrencyDropdown;

型
在其他组件（如Remaining.js）中，您现在可以使用selectedCurrency

// Remaining.js

import React from "react";
import { useCurrency } from "./CurrencyProvider";

const Remaining = () => {
  const currencyRemaining = 100;
  const { selectedCurrency } = useCurrency();
  return (
    <div>
      Remaining:
      {selectedCurrency} {currencyRemaining}
    </div>
  );
};

export default Remaining;

型

赞(0）回复(0）举报 12个月前

我来回答

reactjs 将货币更改从货币菜单应用到预算应用程序的其余部分

2条答案

相关问题

热门标签

最新问答