Выбор строки на клике

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

При этом я не могу выбрать строку. Там нет примеров, которые показывают это.

Некоторые вещи, которые я пробовал, включают попытки установить className по щелчку строки. Но я не могу найти вызывающий элемент в e или t. Кроме того, мне не нравится этот подход, потому что это не то, как реагирующее приложение должно делать вещи.

<ReactTable
            ...
            getTrProps={(state, rowInfo, column, instance) => {
                return {
                    onClick: (e, t) => {
                        t.srcElement.classList.add('active')
                    },
                    style: {
                    }
                }
            }}
        />

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

Я скучаю по слону в комнате? А если нет, знаете ли вы другую библиотеку, которая поддерживает вещи, которые я описал ранее?

Спасибо!

РЕДАКТИРОВАТЬ: Другой вариант, с открытым исходным кодом, это предложить редактирование. И, возможно, это правильная вещь.

РЕДАКТИРОВАТЬ 2

Еще одна вещь, предложенная Даворином Рушевляном в комментариях, но я не могла заставить это работать:

onRowClick(e, t, rowInfo) {
    this.setState((oldState) => {
        let data = oldState.data.slice();
        let copy = Object.assign({},  data[rowInfo.index]);

        copy.selected = true;
        copy.FirstName = "selected";
        data[rowInfo.index] = copy;

        return {
            data: data,
        }
    })
}

....

            getTrProps={(state, rowInfo, column) => {
                return {
                    onClick: (e, t) => { this.onRowClick(e, t, rowInfo) },
                    style: {
                        background: rowInfo && rowInfo.row.selected ? 'green' : 'red'
                    }
                }
            }}

Это устанавливает столбец "FirstName" в "selected", но не устанавливает класс в "green"

ОТВЕТЫ

Ответ 1

Я нашел решение после нескольких попыток, надеюсь, это поможет вам. Добавьте следующее в ваш компонент <ReactTable>:

getTrProps={(state, rowInfo) => {
  if (rowInfo && rowInfo.row) {
    return {
      onClick: (e) => {
        this.setState({
          selected: rowInfo.index
        })
      },
      style: {
        background: rowInfo.index === this.state.selected ? '#00afec' : 'white',
        color: rowInfo.index === this.state.selected ? 'white' : 'black'
      }
    }
  }else{
    return {}
  }
}

В вашем state не забудьте добавить нулевое selected значение, например:

state = { selected: null }

Ответ 2

В React-Table включен HOC, который позволяет выбирать, даже при фильтрации и разбивке на страницы таблицы, настройка немного сложнее, чем в базовой таблице, поэтому сначала прочтите информацию по ссылке ниже.


enter image description here



После импорта HOC вы можете использовать его следующим образом:

/**
* Toggle a single checkbox for select table
*/
toggleSelection(key: number, shift: string, row: string) {
    // start off with the existing state
    let selection = [...this.state.selection];
    const keyIndex = selection.indexOf(key);

    // check to see if the key exists
    if (keyIndex >= 0) {
        // it does exist so we will remove it using destructing
        selection = [
            ...selection.slice(0, keyIndex),
            ...selection.slice(keyIndex + 1)
        ];
    } else {
        // it does not exist so add it
        selection.push(key);
    }
    // update the state
    this.setState({ selection });
}

/**
* Toggle all checkboxes for select table
*/
toggleAll() {
    const selectAll = !this.state.selectAll;
    const selection = [];

    if (selectAll) {
        // we need to get at the internals of ReactTable
        const wrappedInstance = this.checkboxTable.getWrappedInstance();
        // the 'sortedData' property contains the currently accessible records based on the filter and sort
        const currentRecords = wrappedInstance.getResolvedState().sortedData;
        // we just push all the IDs onto the selection array
        currentRecords.forEach(item => {
            selection.push(item._original._id);
        });
    }
    this.setState({ selectAll, selection });
}

/**
* Whether or not a row is selected for select table
*/
isSelected(key: number) {
    return this.state.selection.includes(key);
}

<CheckboxTable
    ref={r => (this.checkboxTable = r)}
    toggleSelection={this.toggleSelection}
    selectAll={this.state.selectAll}
    toggleAll={this.toggleAll}
    selectType="checkbox"
    isSelected={this.isSelected}
    data={data}
    columns={columns}
/>

Смотрите здесь для более подробной информации:
https://github.com/tannerlinsley/react-table/tree/v6#selecttable

Вот рабочий пример:
https://codesandbox.io/s/react-table-select-j9jvw

Ответ 3

Я не знаком с таблицей реагирования, поэтому не знаю, имеет ли он прямую поддержку для выбора и отмены выбора (было бы неплохо, если бы он имел).

Если этого не произойдет, то с уже имеющимся фрагментом кода вы можете установить обработчик onCLick. Теперь вместо того, чтобы пытаться прикрепить стиль непосредственно к строке, вы можете изменить состояние, например, добавив selected: true к данным строки. Это вызвало бы повторное рендеринг. Теперь вам нужно только переопределить способ отображения строк с выбранным === true. Что-то вроде строк:

// Any Tr element will be green if its (row.age > 20) 
<ReactTable
  getTrProps={(state, rowInfo, column) => {
    return {
      style: {
        background: rowInfo.row.selected ? 'green' : 'red'
      }
    }
  }}
/>

Ответ 4

если u хочет иметь множественный выбор в строке выбора.

import React from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
import { ReactTableDefaults } from 'react-table';
import matchSorter from 'match-sorter';


class ThreatReportTable extends React.Component{

constructor(props){
  super(props);

  this.state = {
    selected: [],
    row: []
  }
}
render(){

  const columns = this.props.label;

  const data = this.props.data;

  Object.assign(ReactTableDefaults, {
    defaultPageSize: 10,
    pageText: false,
    previousText: '<',
    nextText: '>',
    showPageJump: false,
    showPagination: true,
    defaultSortMethod: (a, b, desc) => {
    return b - a;
  },


  })

    return(
    <ReactTable className='threatReportTable'
        data= {data}
        columns={columns}
        getTrProps={(state, rowInfo, column) => {


        return {
          onClick: (e) => {


            var a = this.state.selected.indexOf(rowInfo.index);


            if (a == -1) {
              // this.setState({selected: array.concat(this.state.selected, [rowInfo.index])});
              this.setState({selected: [...this.state.selected, rowInfo.index]});
              // Pass props to the React component

            }

            var array = this.state.selected;

            if(a != -1){
              array.splice(a, 1);
              this.setState({selected: array});


            }
          },
          // #393740 - Lighter, selected row
          // #302f36 - Darker, not selected row
          style: {background: this.state.selected.indexOf(rowInfo.index) != -1 ? '#393740': '#302f36'},


        }


        }}
        noDataText = "No available threats"
        />

    )
}
}


  export default ThreatReportTable;

Ответ 5

Другим механизмом динамического моделирования является его определение в JSX для вашего компонента. Например, следующее может быть использовано для селективного стиля текущего шага в React крестики-нолики учебник (один из предложенных дополнительных усовершенствований кредита:

  return (
    <li key={move}>
      <button style={{fontWeight:(move === this.state.stepNumber ? 'bold' : '')}} onClick={() => this.jumpTo(move)}>{desc}</button>
    </li>
  );

Разумеется, более чистым подходом было бы добавить/удалить "выбранный" класс CSS, но в некоторых случаях этот прямой подход может оказаться полезным.

Ответ 6

Выбранный вами ответ является правильным, однако, если вы используете таблицу сортировки, она вылетит, так как rowInfo станет неопределенным при поиске, рекомендую использовать эту функцию вместо

                getTrGroupProps={(state, rowInfo, column, instance) => {
                    if (rowInfo !== undefined) {
                        return {
                            onClick: (e, handleOriginal) => {
                              console.log('It was in this row:', rowInfo)
                              this.setState({
                                  firstNameState: rowInfo.row.firstName,
                                  lastNameState: rowInfo.row.lastName,
                                  selectedIndex: rowInfo.original.id
                              })
                            },
                            style: {
                                cursor: 'pointer',
                                background: rowInfo.original.id === this.state.selectedIndex ? '#00afec' : 'white',
                                color: rowInfo.original.id === this.state.selectedIndex ? 'white' : 'black'
                            }
                        }
                    }}
                }

Ответ 7

Несколько строк с флажками и выберите все, используя крючки useState(). Требуется небольшая реализация для адаптации к собственному проекту.

    const data;
    const [ allToggled, setAllToggled ] = useState(false);
    const [ toggled, setToggled ] = useState(Array.from(new Array(data.length), () => false));
    const [ selected, setSelected ] = useState([]);

    const handleToggleAll = allToggled => {
        let selectAll = !allToggled;
        setAllToggled(selectAll);
        let toggledCopy = [];
        let selectedCopy = [];
        data.forEach(function (e, index) {
            toggledCopy.push(selectAll);
            if(selectAll) {
                selectedCopy.push(index);
            }
        });
        setToggled(toggledCopy);
        setSelected(selectedCopy);
    };

    const handleToggle = index => {
        let toggledCopy = [...toggled];
        toggledCopy[index] = !toggledCopy[index];
        setToggled(toggledCopy);
        if( toggledCopy[index] === false ){
            setAllToggled(false);
        }
        else if (allToggled) {
            setAllToggled(false);
        }
    };

....


                Header: state => (
                    <input
                        type="checkbox"
                        checked={allToggled}
                        onChange={() => handleToggleAll(allToggled)}
                    />
                ),
                Cell: row => (
                    <input
                        type="checkbox"
                        checked={toggled[row.index]}
                        onChange={() => handleToggle(row.index)}
                    />
                ),

....

<ReactTable

...
                    getTrProps={(state, rowInfo, column, instance) => {
                        if (rowInfo && rowInfo.row) {
                            return {
                                onClick: (e, handleOriginal) => {
                                    let present = selected.indexOf(rowInfo.index);
                                    let selectedCopy = selected;

                                    if (present === -1){
                                        selected.push(rowInfo.index);
                                        setSelected(selected);
                                    }

                                    if (present > -1){
                                        selectedCopy.splice(present, 1);
                                        setSelected(selectedCopy);
                                    }

                                    handleToggle(rowInfo.index);
                                },
                                style: {
                                    background: selected.indexOf(rowInfo.index)  > -1 ? '#00afec' : 'white',
                                    color: selected.indexOf(rowInfo.index) > -1 ? 'white' : 'black'
                                },
                            }
                        }
                        else {
                            return {}
                        }
                    }}
/>