как сделать стрелку увеличения и стрелку уменьшения в React для сортировки

#javascript #reactjs #sorting

Вопрос:

я создал таблицу, и теперь я могу сортировать несколько столбцов. я хочу, чтобы после нажатия определенной кнопки я получал символ увеличения на кнопке и символ уменьшения на кнопке, если нажать ее снова, ниже приведен мой код функции, которая изменяет столбец, а также направление, а также привел кнопки в качестве примера

 function change(set){
      let direction='asc';
      if(sortOrder==='asc'){
        direction='desc';
      }
      setSortBy(set);
      setSortOrder(direction);
    }

<table>
<th><button onClick={()=>change('name')}>
                     Name
                    </button></th>
<th><button onClick={()=>change('total')}>
                    Total
                    </button></th>
</table>

так что любой может показать мне, как я могу достичь этого

1. Я правильно понял вопрос? Итак, если вы сортируете в порядке возрастания, это должно отображаться стрелкой вверх, иначе стрелкой вниз?

2. да,вы все правильно поняли, но это должно отображаться для конкретной колонки, на которую я нажал в данный момент

Ответ №1:

Для простой сортировки содержимого таблицы попробуйте data-table. Например: https://www.npmjs.com/package/react-data-table-component

Ответ №2:

Вы должны поддерживать порядок сортировки столбцов в состоянии. Когда вы нажимаете на столбец/кнопку, вы обновляете состояние, и изменения будут отражены в визуализации. Используйте атрибуты данных для идентификации столбцов/кнопок. И, если вы не используете отдельную библиотеку CSS для чего-либо еще в своем проекте, просто используйте стрелки unicode вверх/вниз.

 const {useState} = React;

function Example() {

  // Use an object to maintain the column sort order
  const [order, setOrder] = useState({ name: 'asc', total: 'asc' });

  function handleClick({ target }) {
  
    // Instead of attaching a handler to each button,
    // there is one on the table, and we simply need to check
    // that the element we've clicked on is a button instead.
    if (target.nodeName === 'BUTTON') {

      // Grab the type (name, total etc) from the data attribute
      const { dataset: { type } } = target;

      // Set the state of the new order
      setOrder(prev => {
        const newOrder = prev[type] === 'asc' ? 'desc' : 'asc';
        return { ...prev, [type]: newOrder };
      });

    }
  }

  // Return the arrows
  function getArrow(order) {
    if (order === 'asc') return '↑';
    return '↓';
  }

  return (
    <table onClick={handleClick}>
      <th><button data-type="name">Name {getArrow(order.name)}</button></th>
      <th><button data-type="total">Total {getArrow(order.total)}</button></th>
    </table>
  );
};

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>