如何在react中基于下拉选择更新表
如何在react中基于下拉选择更新表
提问于 2021-03-11 12:42:05
我有一个从json文件加载数据的表。我需要找到一种方法，根据从下拉菜单中选择的货币来更改{tableDetails.price}的值。我使用了react-select node包，因为我认为它会更容易。表如下所示：
{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>
})}反应-选择选项如下所示：
const options = [
{ value: 'USD', label: 'USD' },
{ value: 'GBP', label: 'GBP' },
{ value: 'EUR', label: 'EUR' }
]任何帮助都会非常感谢，干杯
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-11 13:30:47
对于函数式组件，您可以执行如下操作
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,
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 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组件引起状态更改时，您的表将使用更新后的价格重新呈现。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66576584
复制相关文章
相似问题
腾讯云开发者
