如何解决如何根据下拉选择更新反应表
我有一个表,其中包含从 json 文件加载的数据。我需要找到一种方法来根据从下拉菜单中选择的选定货币来更改 {tableDetails.price} 的值。我正在使用 react-select 节点包,因为我认为它会更容易。表格如下所示:
{TableData.map((tableDetails) => {
return <div>
<table className="table-fixed w-full">
<tbody>
<tr>
<td id="tablebody1">{tableDetails.Sample_Postcode}</td>
<td id="tablebody2">{tableDetails.Australia}</td>
<td id="price1">{tableDetails.Price1}</td>
<td>{tableDetails.Price2}</td>
<td>{tableDetails.Price3}</td>
<td>{tableDetails.Price4}</td>
<td>{tableDetails.Price5}</td>
<td>{tableDetails.Price6}</td>
<td>{tableDetails.Price7}</td>
<td>{tableDetails.Price8}</td>
<td>{tableDetails.Price9}</td>
<td>{tableDetails.Price10}</td>
</tr>
</tbody>
</table>
</div>
})}
react-select 选项如下所示:
const options = [
{ value: 'USD',label: 'USD' },{ value: 'GBP',label: 'GBP' },{ value: 'EUR',label: 'EUR' }
]
任何帮助将不胜感激,干杯
解决方法
对于功能组件,您可以执行以下操作
import Select from "react-select";
import { useState } from "react";
// Assuming only one element with random price
const TableData = [
{
Price1: 100,Price2: 230,Price3: 500,Price4: 780,Price5: 101,Price6: 567,Price7: 4356,Price8: 1234,Price9: 8790,Price10: 3242
}
];
const options = [
{ value: "USD",label: "USD" },{ value: "GBP",label: "GBP" },{ value: "EUR",label: "EUR" }
];
export default function App() {
// Initialize the state variable with the a currency (USD in this case)
const [currency,setCurrency] = useState(options[0]);
const getConvertedPrice = (price) => {
// assuming your prices TableData are in USD
// I just pulled conversions from google for USD to currency ABC
const { value } = currency;
if (value === "USD") {
return price.toFixed(2);
}
if (value === "GBP") {
return (price * 0.72).toFixed(2);
}
if (value === "EUR") {
return (price * 0.84).toFixed(2);
}
};
return (
<div className="App">
<Select
className="basic-single"
isSearchable
options={options}
onChange={setCurrency}
value={currency}
/>
<h2>My Table with prices</h2>
<br />
<br />
<br />
<br />
{TableData.map((tableDetails) => {
return (
<div>
<table className="table-fixed w-full">
<tbody>
<tr>
<td id="tablebody1">{tableDetails.Sample_Postcode}</td>
<td id="tablebody2">{tableDetails.Australia}</td>
<td id="price1">{getConvertedPrice(tableDetails.Price1)}</td>
<td>{getConvertedPrice(tableDetails.Price2)}</td>
<td>{getConvertedPrice(tableDetails.Price3)}</td>
<td>{getConvertedPrice(tableDetails.Price4)}</td>
<td>{getConvertedPrice(tableDetails.Price5)}</td>
<td>{getConvertedPrice(tableDetails.Price6)}</td>
<td>{getConvertedPrice(tableDetails.Price7)}</td>
<td>{getConvertedPrice(tableDetails.Price8)}</td>
<td>{getConvertedPrice(tableDetails.Price9)}</td>
<td>{getConvertedPrice(tableDetails.Price10)}</td>
</tr>
</tbody>
</table>
</div>
);
})}
</div>
);
}
对于基于类的组件
import Select from "react-select";
import { Component } from "react";
const TableData = [
{
Price1: 100,label: "EUR" }
];
export default class App extends Component {
// Initialize the state variable with the a currency (USD in this case)
state = {
currency: options[0]
}
getConvertedPrice = (price) => {
// assuming your prices TableData are in USD
// I just pulled conversions from google for USD to currency ABC
const { value } = this.state.currency;
if (value === "USD") {
return price.toFixed(2);
}
if (value === "GBP") {
return (price * 0.72).toFixed(2);
}
if (value === "EUR") {
return (price * 0.84).toFixed(2);
}
};
handleCurrencyChange = (changedCurrency) => {
this.setState({currency: changedCurrency})
}
render() {
return (
<div className="App">
<Select
className="basic-single"
isSearchable
options={options}
onChange={this.handleCurrencyChange}
value={this.state.currency}
/>
<h2>My Table with prices</h2>
<br />
<br />
<br />
<br />
{TableData.map((tableDetails) => {
return (
<div>
<table className="table-fixed w-full">
<tbody>
<tr>
<td id="tablebody1">{tableDetails.Sample_Postcode}</td>
<td id="tablebody2">{tableDetails.Australia}</td>
<td id="price1">{this.getConvertedPrice(tableDetails.Price1)}</td>
<td>{this.getConvertedPrice(tableDetails.Price2)}</td>
<td>{this.getConvertedPrice(tableDetails.Price3)}</td>
<td>{this.getConvertedPrice(tableDetails.Price4)}</td>
<td>{this.getConvertedPrice(tableDetails.Price5)}</td>
<td>{this.getConvertedPrice(tableDetails.Price6)}</td>
<td>{this.getConvertedPrice(tableDetails.Price7)}</td>
<td>{this.getConvertedPrice(tableDetails.Price8)}</td>
<td>{this.getConvertedPrice(tableDetails.Price9)}</td>
<td>{this.getConvertedPrice(tableDetails.Price10)}</td>
</tr>
</tbody>
</table>
</div>
);
})}
</div>
);
}
}
在 Select 组件引起的状态更改时,您的表格将使用更新后的价格重新呈现。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。