React-таблица: сохранить значение аксессора в состоянии с помощью флажка - PullRequest
Новая
       12

React-таблица: сохранить значение аксессора в состоянии с помощью флажка

0 голосов
/ 24 апреля 2018

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

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

Мой код пока: 

import React from 'react';
import ReactTable from "react-table";
import 'react-table/react-table.css'

export default class TableAccessor extends React.Component {
  constructor(props){
    super(props);
    this.state = { personId: null }

     //Data to show inside the table, when an item gets selected the ID has to be set in the state
    this.data= [
      {id: 1, first_name: 'Emma', last_name: 'Smith', email: 'emma@example.com'},
      {id: 2, first_name: 'Liam', last_name: 'Miller', email: 'liam@example.com'}
    ];

    //Header data for the table
    this.columns = [
      {Header: '#', accessor: 'id', Cell: () => <input onChange={() => {
        //Here i want to get the ID of the selected item defined in this.data
        this.setState({personId: this.data.id});
      }} type="checkbox"></input>},
      {Header: 'First name', accessor: 'first_name'},
      {Header: 'Last name', accessor: 'last_name'},
      {Header: 'Email', accessor: 'email'}
    ];

  }

  logger = () => {
    console.log("personId: " + this.state.personId)
  }

  render() {
    return(
      <div className="wrapper">
        <button onClick={this.logger}>Print</button>
        <ReactTable data={this.data} columns={this.columns} />
      </div>
    );
  }
}

Я также хочу иметь возможность установить только один флажок одновременно.Я видел, как люди решали эту проблему с помощью переключателей, однако, когда я изменил type="checkbox" на type="radio", я все еще мог выбрать более одного элемента.

Кто может помочь мне решить эту проблему и объяснить, как лучшетакое сохранить значение аксессора в состоянии?

Заранее спасибо:)

1 Ответ

0 голосов
/ 24 апреля 2018

Прежде всего, зачем вам использовать пакет react-table? В чем преимущество использования стороннего пакета вместо написания его самостоятельно?

Шаги, которые я бы предпринял:

  1. Напишите статическую таблицу HTML с необходимыми вам данными
  2. Сопоставьте массив data со строками таблицы и заполните его. Обязательно добавьте атрибут data-id и передайте id attribute из массива каждому элементу
  3. Добавьте обработчики onClick, которые при нажатии получают атрибут data-id.
  4. Вы можете использовать вычисленные имена свойств (пример здесь ) и генерировать состояние следующим образом: this.setState( {[savedId]: value} )

И это должно быть.

...