使用react-sortable-hoc列出待办事项

Question

我使用的是可排序的拖放，它工作得很好。问题是，我希望用户能够删除项目。SortableItem组件是不可访问的，因为它随代码一起提供，所以我不能传递将索引作为参数的事件处理程序。这是我到目前为止所知道的：

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

由于您无法控制SortableItem组件的事件，因此可以将该组件包装在您可以控制的组件中。

例如，如果我想要向SortableItem添加一个单击处理程序，我会将其添加到div包装器中：

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