Question

我正在使用可排序的拖放，效果很好。问题是我希望用户能够删除项目。代码无法访问SortableItem组件，因此我无法传递将index作为参数的事件处理程序。这是我到目前为止的内容：

const SortableItem = SortableElement(
 ({value}) =>
 <ul>{value}</ul>
);

const SortableList = SortableContainer(({items}) => {
 return (
<ul>
  {items.map((value, index) => (
    <SortableItem key={`item-${index}`} index={index} value={value} />
  ))}
</ul>
);
});

export class BlocksContainer extends React.Component {
  constructor(props){
   super(props);
   this.state = {
  items: [],
 };
}
onSortEnd = ({oldIndex, newIndex}) => {
  this.setState({
    items: arrayMove(this.state.items, oldIndex, newIndex),
  });
};

addBlock = (block) =>{
  let arr = [...this.state.items, block];
  this.setState({items: arr})
}

removeBlock = (index) => {
let remove = [...this.state.items];
remove.filter(block => block === index);
this.setState({items:remove})
}

render() {
  return (<div><div onChange={console.log(this.state)} className="sortableContainer"><SortableList items={this.state.items} onSortEnd={this.onSortEnd} /></div>
  <h2>Blocks</h2>
  <button onClick={() => this.addBlock(<BannerImage remove={this.removeBlock} />)}>Banner Image</button>
  <button onClick={() => this.addBlock(<ShortTextCentred remove={this.removeBlock}/>)}>Short Text Centred</button>
  <h2>Layouts</h2>
  <hello />
         </div>
)
}
}

Answer 1

由于您无法控制Dim l As Long l = Cells(Rows.Count, "A").End(xlUp).Row For a = 2 To l Cells(a, 3).Value = Application.WorksheetFunction. _ SumIf(Worksheets("Sheet 1").Range("A2:A" & l), _ Cells(a, 1).Value, _ Worksheets("Sheet 1").Range("C2:C" & l)) + _ Application.WorksheetFunction. _ SumIf(Worksheets("Sheet 2").Range("A2:A" & l), _ Cells(a, 1).Value, _ Worksheets("Sheet 2").Range("C2:C" & l)) Next a组件的事件，因此可以将该组件包装在您可以控制的组件中。

例如，如果我想将点击处理程序添加到SortableItem，则将其添加到div包装器中：

SortableItem

使用react-sortable-hoc列出清单

1 个答案: