Я новичок в 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;
нажмите здесь для скриншота