import * as React from 'react' import { Dragact } from '../../src/lib/dragact' const Words = [ { content: 'You can do anything, but not everything.' }, { content: 'Those who dare to fail miserably can achieve greatly.' }, { content: 'You miss 100 percent of the shots you never take.' }, { content: 'Those who believe in telekinetics, raise my hand.' }, { content: 'I’d rather live with a good question than a bad answer.' } ] const Card = ({ item, provided, onDelete }: any) => { return (
onDelete(item.key)} > ❌
{item.content}
) } const fakeData = () => { var Y = 0 return Words.map((item, index) => { if (index % 4 === 0) Y++ return { ...item, GridX: (index % 4) * 4, GridY: Y * 4, w: 4, h: 3, key: index } }) } const makeOne = () => { return { content: 'added', GridX: 0, GridY: 0, w: 4, h: 3, key: Date.now() } } export class AddRemove extends React.Component<{}, {}> { state = { layout: fakeData() } componentDidMount() {} handleClick = () => { const change = this.state.layout.map(item => { return { ...item, content: '21312' } }) this.setState({ layout: [...change, makeOne()] }) } hanldeOnDelete = (key: any) => { const layout = this.state.layout.filter(item => { if (item.key !== key) { return item } }) this.setState({ layout: layout }) } render() { const margin: [number, number] = [5, 5] const dragactInit = { width: 600, col: 12, rowHeight: 800 / 12, margin: margin, className: 'normal-layout', layout: this.state.layout, placeholder: true } return (

AddRemove Demo

在这个布局中,新增一个布局,会新加入一个布局

{(item, provided) => { return ( ) }}
) } }