我在使用此反应表包向行添加复选框时遇到问题https://react-table.js.org/#/story/readme https://react-table.js.org/#/story/readme
我正在尝试向表中的每一行添加一个复选框。我尝试将“复选框”添加到列区域中看到的“单元格”值,但是,它似乎不适用于分页。一旦我单击下一页然后返回,它就会忘记所有以前检查过的产品。我如何维持他们的状态?
我添加了一个键,它可以防止在所有页面上检查该元素,但是,当我在页面上来回更改时,它不会记住它。所以我现在只需要存储它的“开启状态”。
Cell: rowInfo => (<Checkbox key={rowInfo.index} onChange={this.handleChange} />)
这是完整的代码:
import React from 'react'
import ReactDOM from 'react-dom'
import ReactTable from 'react-table'
import PropTypes from 'prop-types'
import { Checkbox } from '@shopify/polaris';
export default class ProductIndexTable extends React.Component {
constructor(props) {
super(props);
this.state = {
rowInfo: ''
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(event) {
}
render() {
function CreateItem(product) {
return {
title: <a href={'/products/' + product.id} >{product.title}</a>,
price_test_status: product.has_active_price_test,
price_test_completion_percentage: product.price_test_completion_percentage
}
}
return (<ReactTable
data={this.props.products.map(CreateItem)}
getTdProps={(state, rowInfo, column, instance) => {
return {
onClick: (e, handleOriginal) => {
// console.log('A Td Element was clicked!')
// console.log('it produced this event:', e)
// console.log('It was in this column:', column)
// console.log('It was in this row:', rowInfo)
// console.log('It was in this table instance:', instance)
this.setState({
rowInfo: rowInfo.index
})
// IMPORTANT! React-Table uses onClick internally to trigger
// events like expanding SubComponents and pivots.
// By default a custom 'onClick' handler will override this functionality.
// If you want to fire the original onClick handler, call the
// 'handleOriginal' function.
if (handleOriginal) {
handleOriginal()
}
}
}
}}
columns={[
{
Header: "Base",
columns: [
{
Header: <Checkbox />,
maxWidth: 50,
Cell: (<Checkbox onChange={this.handleChange} />)
}, {
Header: "Product Title",
accessor: "title",
maxWidth: 400
}, {
Header: "Price Test Status",
accessor: "price_test_status",
maxWidth: 200
}, {
Header: "Price Test Completion Percentage",
accessor: "price_test_completion_percentage",
Cell: row => (
<div
style={{
width: '100%',
height: '100%',
backgroundColor: '#dadada',
borderRadius: '2px'
}}
>
<div
style={{
width: `${row.value}%`,
height: '100%',
backgroundColor: row.value > 66 ? '#85cc00'
: row.value > 33 ? '#ffbf00'
: '#ff2e00',
borderRadius: '2px',
transition: 'all .2s ease-out'
}}
/>
</div>
)
}
]
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
);}
}