Question

我已经弄清楚您需要使用sort函数对表onClick进行排序。我想做的是按键排序，这样我就不必继续重复代码以按键排序功能。我想保持代码干燥。我将如何去做。还有

代码

  const sortTable = (key) => {
    const clonedOptions = [...listOfOptions];
    clonedOptions.sort((a, b) => {
      return a.key - b.key;
    });
    console.log(clonedOptions, key);
    setListOfOptions(clonedOptions);
  };

    <div className="outputs">
      <table>
        <thead>
          <tr>
            <th></th>
            <th onClick={() => sortTable()}>Date</th>
            <th onClick={sortTable}>Stock Name</th>
            <th onClick={sortTable}>Price Of Option</th>
            <th onClick={sortTable}>Number Of Options</th>
            <th onClick={sortTable}>Total Amount Spent</th>
            <th onClick={sortTable}>Option Sold At</th>
            <th onClick={sortTable}>Amount Of Options Sold</th>
            <th onClick={sortTable}>Proft</th>
          </tr>
        </thead>
        {listOfOptions.map((option) => {
          return (
            <tbody key={uuidv1()}>
              <tr>
                <td title="delete" onClick={() => deleteOption(option.id)}>
                  <span className="delete">x</span>
                </td>
                <td>{option.clock}</td>
                <td>{option.name.toUpperCase()}</td>
                <td>${option.price}</td>
                <td>{option.amountOfOptions}</td>
                <td>${option.totalAmountSpent.toFixed(2)}</td>
                <td>${option.optionPriceSoldAt}</td>
                <td>{option.amountOfOptionsSold}</td>
                <td
                  style={{ color: option.totalProfit >= 0 ? "green" : "red" }}
                >
                  {option.totalProfit.toFixed(2)}
                </td>
              </tr>
            </tbody>
          );
        })}
      </table>
    </div>

Answer 1

您的代码仅需进行一些更改：在sort函数中使用key param的值，并在每次onClick中传递密钥

  const sortTable = (key) => {
    const clonedOptions = [...listOfOptions];
    clonedOptions.sort((a, b) => {
      return a[key] - b[key];
    });
    console.log(clonedOptions, key);
    setListOfOptions(clonedOptions);
  };

    <tr>
      <th></th>
      <th onClick={() => sortTable('date')}>Date</th>
      <th onClick={() => sortTable('name')}>Stock Name</th>
      <th onClick={() => sortTable('price')}>Price Of Option</th>
      <th onClick={() => sortTable('amountOfOptions')}>Number Of Options</th>
      <th onClick={() => sortTable('totalAmountSpent')}>Total Amount Spent</th>
      <th onClick={() => sortTable('optionPriceSoldAt')}>Option Sold At</th>
      <th onClick={() => sortTable('amountOfOptionsSold')}>Amount Of Options Sold</th>
      <th onClick={() => sortTable('totalProfit')}>Proft</th>
    </tr>

按键值对表格进行排序

1 个答案: