Как я могу получить более одного значения строки данных на основе выбранного флажка и сохранить в useState (реагировать-таблица-boostrap2) - PullRequest
Новая
       35

Как я могу получить более одного значения строки данных на основе выбранного флажка и сохранить в useState (реагировать-таблица-boostrap2)

0 голосов
/ 27 апреля 2020

Я новичок в reactjs и реагируем на таблицу-boostrap2.У меня возникли трудности. Я хотел бы получить значение строки данных для выбранного флажка в таблице, и что я делаю, я ставлю состояние на реквизиты selectrow.onSelect, так как я пытаюсь установить несколько флажков, он возвращает только объект с одним значением, хотел бы иметь объект с объединением более чем одного значения, но если я использую selectRow.onSelectAll применимо, только если установить все флажки, которые не по моему требованию. пожалуйста, помогите.

ps: очень жаль, что engli sh не мой родной язык.

пример кода: 

import React, { useState, useEffect } from "react";
import "./App.css";
import axios from "axios";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import ToolkitProvider, { Search } from "react-bootstrap-table2-toolkit";
import * as ReactBootStrap from "react-bootstrap";

const { SearchBar } = Search;

const App = () => {
  const [players, setPlayer] = useState([]);
  const [loading, setLoading] = useState(false);
  const [value, setValue] = useState({});
  const getPlayerData = async () => {
    try {
      const data = await axios.get(
        "https://nba-players.herokuapp.com/players-stats"
      );
      console.log(data);
      setPlayer(data.data);
      setLoading(true);
    } catch (e) {
      console.log(e);
    }
  };
  const columns = [
    { dataField: "name", text: "Player Name" },
    { dataField: "points_per_game", text: "Points Per Game" },
    { dataField: "team_name", text: "Player Team" },
  ];

  useEffect(() => {
    getPlayerData();
  }, []);

  const selectRow = {
    mode: "checkbox",
    onSelect: (row, isSelect, rowIndex, e) => {
      setValue({ row }); // when console.log if click more than one the object does not combine the selected data row value
      console.log(row, isSelect);
    },
    onSelectAll: (isSelect, rows, e) => {
      console.log(isSelect);
      console.log(rows);
      console.log(e);
    },
  };

  return (
    <div className="App">
      {loading ? (
        <ToolkitProvider
          keyField="name"
          data={players}
          columns={columns}
          search
        >
          {(props) => (
            <div>
              <h3>Input something at below input field:</h3>
              <SearchBar {...props.searchProps} />
              <hr />
              <BootstrapTable
                selectRow={selectRow}
                pagination={paginationFactory()}
                {...props.baseProps}
              />
            </div>
          )}
        </ToolkitProvider>
      ) : (
        <ReactBootStrap.Spinner animation="border" />
      )}
    </div>
  );
};

export default App;

нажмите здесь для скриншота

1 Ответ

0 голосов
/ 28 апреля 2020

Хотите сделать такие логи c: если объект уже представлен - удалить, еще - добавить? Вы должны дать переменным имена лучше, чем «value», например selectedRows или что-то вроде этого. 

 const handleSelectRow = (e, columnIndex, rowIndex, row) => {
    if (!(value.some(item => row.name === item.name))) {
        const selectedData = {
            name: row.name,
            points: row.points_per_game,
            team: row.team_name,
        };
        setValue(value => [...value, selectedData]);
    } else {
        setValue(value.filter(item => item.name !== row.name));
    }
  };
...