我如何控制台记录表组件上显示的选定值,然后存储我的选择并将其传递给第二个函数?
我有一个表显示来自API的数据,该表的每一行上都有复选框。我正在使用<表/>React的物料UI组件。
根据文档,onRowSelection(类似于onClick)属性应该给我一个所选行的数组(仅索引),例如,如果我选择第一行,控制台将打印[0],如果我选择第一行和第五行,控制台将打印[0,4]
现在,提供给表的数据来自我的状态,这是来自我的API的数据
这状态数据表=响应。数据
所以它看起来像是通过这个循环的。状态dataTable,并且不考虑正在激发的事件。我做错了什么?
在onRowSelection内部的函数中,我做了以下操作:
handleRowSelection (i) {
for (let x = 0, len = i.length; x < len; x++) {
i = this.state.dataTable[x];
console.log(i);
}
}
我最初认为它给出了正确的值。当我单击第一个复选框(行)时,它给出了第一行元素的值,但当我单击第六个复选框时,它给出了第二行元素的值,第七个复选框=第三个元素,依此类推。
我也试过这个
handleRowSelection (row) {
const selectedRows = []
this.state.dataTable.forEach((row, i) => {
row = row.indexOf(i) > -1
selectedRows.push(row)
}
console.log(selectedRows)
这给了我一个有趣的值,比如:【false,false,false,
真的
真的
]
不用说
真的
值表示我选中的复选框
代码(跳到类的开头)
import ...
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow,
TableRowColumn} from "material-ui/Table";
const REAL_URL = `//xx.xx.xx.xx/getData/`;
const markers = [
{
key: "Q123456789",
position: [37.786464, -122.411047],
children: "My first popup"
},
{
key: "P234567890",
position: [40.689192, -74.044563],
children: "My second popup"
}
];
const MyPopupMarker = ({ children, position, index, handleToggle }) => (
<Marker onClick={() => handleToggle(index)} position={position}>
<Popup>
<span>{children}</span>
</Popup>
</Marker>
);
const MarkerList = ({ markers, handleToggle }) => {
const items = markers.map(({ key, ...props }, i) => (
<MyPopupMarker key={key} {...props} index={i} handleToggle={handleToggle} />
));
return <div>{items}</div>;
};
// var holdArray = []
class Mapper extends Component {
constructor(props) {
super(props);
this.handleToggle = this.handleToggle.bind(this);
this.handleRowSelection = this.handleRowSelection.bind(this);
this.handleClose = this.handleClose.bind(this);
this.handleDeploy = this.handleDeploy.bind(this);
this.state = {
lat: 29.761993,
lng: -95.366302,
zoom: 4,
open: false,
places: [],
selectedMarker: null,
selectable: true,
multiSelectable: true,
enableSelectAll: true,
dataTable: [],
selectedRows: []
};
}
componentDidMount() {
this.setState({
places: markers
});
}
handleToggle(index) {
const self = this;
const selectedMarker = this.state.places[index];
this.setState({
open: !this.state.open,
selectedMarker: selectedMarker
});
const LAST_URL = REAL_URL + this.state.selectedMarker.key;
axios
.get(LAST_URL)
.then(response => {
self.setState({
dataTable: response.data
});
console.log(response.data);
})
.catch(function(error) {
console.log(error);
});
}
handleRowSelection (i) {
for (let x = 0, len = i.length; x < len; x++) {
i = this.state.dataTable[x];
console.log(i);
}
}
handleDeploy () {
let resultObject = {
"devices": this.state.selectedMarker.key,
// "app": this.handleRowSelection()
}
// console.log(resultObject)
}
render() {
const center = [this.state.lat, this.state.lng];
const selectedMarker = this.state.selectedMarker;
let availableRows = this.state.dataTable.map((row, k)=>{
return (
<TableRow key={k} selected={row.selected}>
<TableRowColumn>{row}</TableRowColumn>
<TableRowColumn>Unknown</TableRowColumn>
</TableRow>
)
});
return (
<div>
<Map center={center}
zoom={this.state.zoom}
minZoom={3}
style={styles.map}>
<TileLayer
url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
attribution="© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
/>
<MarkerList markers={markers} handleToggle={this.handleToggle} />
</Map>
<Drawer
width={500}
openSecondary={true}
docked={false}
open={this.state.open}
onRequestChange={open => this.setState({ open })}
containerStyle={styles.whitebox}
>
{
selectedMarker ? (
<div>
<Card style={styles.appMedia}>
<CardTitle
titleStyle={styles.drawTitle}
subtitleStyle={styles.drawTitle}
title={selectedMarker.key}
subtitle="Common Field Equipment"
/>
</Card>
<Table
selectable={this.state.selectable}
multiSelectable={this.state.enableSelectAll}
onRowSelection={(selectedApps) => this.handleRowSelection(selectedApps, this.props)}
>
<TableHeader
enableSelectAll={this.state.enableSelectAll}
displaySelectAll={false}
>
<TableRow>
<TableHeaderColumn>Applications</TableHeaderColumn>
<TableHeaderColumn>Status</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody
deselectOnClickaway={this.state.clickAway}
showRowHover={true}
>
{availableRows}
</TableBody>
</Table>
<RaisedButton
label="START SELECTED"
onClick={this.handleDeploy}
style={styles.buttonStl}
labelPosition="before"
backgroundColor="#363636"
labelStyle={styles.labelStl}
icon={<BeenHere />}
/>
<RaisedButton
label="STOP SELECTED"
style={styles.buttonStl}
labelPosition="before"
backgroundColor="#FF0000"
labelStyle={styles.labelStl}
icon={<Cancel />}
/>
</div>
) : null
}
</Drawer>
</div>
);
}
}
export default Mapper;
链接到组件
http://www.material-ui.com/#/components/table