扫一扫分享
一个简单的、用于创建电子表格的 react 组件。
npm install react-datasheet --save
在项目中导入:
import ReactDataSheet from 'react-datasheet';
// Be sure to include styles at some point, probably during your bootstrapping
import 'react-datasheet/lib/react-datasheet.css';
React-Datasheet生成一个包含单元格的表。双击或键入编辑值,如果更改,则启动onCellsChanged回调。粘贴表格数据或删除一系列单元格也会调用onCellsChanged。 提供的数据应该是一个行数组,每行应包含单元格。
class App extends React.Component {
constructor (props) {
super(props)
this.state = {
grid: [
[{value: 1}, {value: 3}],
[{value: 2}, {value: 4}]
]
}
}
render () {
return (
<ReactDataSheet
data={this.state.grid}
valueRenderer={(cell) => cell.value}
onCellsChanged={changes => {
const grid = this.state.grid.map(row => [...row])
changes.forEach(({cell, row, col, value}) => {
grid[row][col] = {...grid[row][col], value}
})
this.setState({grid})
}}
/>
)
}
}
手机预览