如何根据下拉选择更新反应表

Question

我有一个表，它的数据是从 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' }
      ]

任何帮助将不胜感激，干杯

Answer 1

对于功能组件，您可以执行以下操作

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 组件引起状态变化时，您的表格将使用更新的价格重新呈现。