如何将Switch组件作为一个单独的列集成到Table组件中，并在两者上都有单独的状态

Question

我是React.js的新手，到目前为止，我很喜欢它。尽管如此，我仍然对有状态组件的概念感到困惑。我正在使用Bootstrap表来构建我的表，我对其数据抓取的GET请求完美地工作了。我也在为我的交换机组件使用材料ui-lib(无需在这里重新发明轮子！(

尽管如此，我现在正在尝试集成一个新列，它将是表中每一行的开关，当切换时，它会将所述开关的布尔值更改为true/false，然后将PUT请求发送到我的后端。我还没有构建PUT请求，因为我无法让这个UI部分正常工作。到目前为止，这是我的代码，dumby UI可以工作，但我不知道如何将我在<SwitchState/>和SwitchState()的NodeTableContainer中定义的有状态呈现集成到我在NodeTable组件的selectionRenderer: Switches中的定义中。有状态渲染确实在表下渲染了一个切换开关，本质上是作为它自己的独立组件。但我想在const selectRow = {mode: 'checkbox', clickToSelect: true,selectionRenderer: Switches}中集成切换开关组件。这是我的代码，我希望我已经很好地解释了我的问题。我无休止地在谷歌上搜索，但我相信我自己的无知阻碍了我找到我需要的答案。

Table Component (NodeTable)

import React from 'react';
import {
Row,
Col,
Card,
CardBody,
} from 'reactstrap';
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { Search, CSVExport, ColumnToggle } from 'react-bootstrap-table2-toolkit';
import paginationFactory from 'react-bootstrap-table2-paginator';
import 'chartjs-plugin-colorschemes';
import Switches from './Switch'
const columns = OMIT

const defaultSorted = [
{
dataField: 'id',
order: 'asc',
},
]
const TableWithSearch = (props) => {


const { SearchBar } = Search;
const { ExportCSVButton } = CSVExport;

const selectRow = {
mode: 'checkbox',
clickToSelect: true,
selectionRenderer: Switches

}
return (
<Card>
<CardBody>
<h4 className="header-title">OMIT</h4>
<p className="text-muted font-14 mb-4">OMIT</p>

<ToolkitProvider
bootstrap4
keyField="fqn"
data={props.data}
columns={columns}
columnToggle
search
exportCSV={{ onlyExportFiltered: true, exportAll: false }}>
{props => (
<React.Fragment>
<Row>
<Col>
<SearchBar {...props.searchProps} />

</Col>
<Col className="text-right">
<ExportCSVButton {...props.csvProps} className="btn btn-primary">
Export CSV
</ExportCSVButton>

</Col>
</Row>

<BootstrapTable
{...props.baseProps}
bordered={false}
defaultSorted={defaultSorted}
pagination={paginationFactory({ sizePerPage: 5 })}
selectRow={selectRow}
wrapperClasses="table-responsive"
/>
</React.Fragment>
)}
</ToolkitProvider>
</CardBody>
</Card>
);
};

export default TableWithSearch;

Switch Component

// @flow
import React from 'react';
import 'chartjs-plugin-colorschemes';
import './Switch.css'
import Switch from '@material-ui/core/Switch';
export default function Switches({ isOn, handleToggle }) {
return (
<div>
<Switch
checked={isOn}
onChange={handleToggle}
name="checkedA"
inputProps={{ 'aria-label': 'secondary checkbox' }}
/>
</div>
);
}

Parent Component (NodeTableContainer)

import axios from 'axios';
import React, { Component, useState } from 'react';
import Switch from './Switch';
import App from './index';


export default class MainComp extends React.Component {


state = {
nodesData: [],
chartRef: [],
conn: [],
switchstate: [],
}
componentDidMount() {
axios.get('OMIT')
.then(res => {
const nodestate = res.data.map(x => x.nodestate);
for (var i = 0; i < nodestate.length; i++) {
if (nodestate[i] == 'up') {

nodestate[i] = true;
}
else {
nodestate[i] = false;
}
}
this.setState({ nodesData: res.data, switchstate: nodestate });


})

}
render() {
return (
< >
<App data={this.state.nodesData} checked={this.state.switchstate} />,
<SwitchState />
</>
)
}
}
function SwitchState() {
const [value, setValue] = useState(false);
console.log(value)
return (
<div className="app">
<Switch
isOn={value}
onColor="#EF476F"
handleToggle={() => setValue(!value)}
/>
</div>
);
}

此外，正如您所看到的，我的SwitchState组件是一个愚蠢的形式，直到我看到显示其布尔状态变化的日志。此外，NodeTableContainer中的nodestate是我通过相同状态数据提取数据的可悲尝试。这是不起作用的，你也会看到。一旦我能弄清楚这一点，我就会好好建设这个国家，或者你们这些优秀的人也会在这方面帮助我。再次，我在这里展示了我的无知，所以如果有更简单的方法，或者如果我使用了一种奇怪的libs，请告诉我。我想学习并茁壮成长。如果你有自己的解决方案，那就完全不同了，我恳请你分享！谢谢大家！

Answer 1

我为react引导程序找到了这个。我在formatter中用箭头指示，并将状态传递给formatExtraData。然后，我从保存所有状态的组件传递状态，它可以完美地工作。是时候将我的PUT请求与事件处理程序集成在一起了！

以下是我对代码的更改：

Table Component

export default class TableComp extends React.Component
formatter: (cell, row, index, extra) => {
if (cell === 'up') {
cell = true
}
else {
cell = false
}
return (
<div>
<Switch
checked={cell}
onChange={extra.handle}
name={row.name}
inputProps={{ 'aria-label': 'secondary checkbox' }}
/>
</div>
)
},
formatExtraData: { handle: this.props.handleClick }

Parent Component (Holds all state)

handleClick = (e) => {
var indexFound = this.state.data.findIndex(y => y.name === e.target.name.toString())
let data= [...this.state.data];
let item = { ...data[indexFound] }
if (item.state === 'up') {
item.state = 'down'
}
else {
item.state = 'up'
}
data[indexFound] = item
this.setState({ data})
}