Question

我在拖放UI中使用react-selectable-fast。我想在删除事件结束时以编程方式取消选择所有对象。

documentation说可能：

在SelectableGroup上使用ref可以访问ref.clearSelection（）方法，从而以编程方式取消选择所有项目。

我尝试向SelectableGroup添加一个引用并运行ref.clearSelection（），但得到ref.clearSelection is not a function。

这对我来说并不明显，并且似乎没有关于该主题的更多文档。

有人可以帮我举一个简单的例子来说明其工作原理吗？

Answer 1

这意味着您可以将ref应用于SelectableGroup对象，并以编程方式在ref上调用clearSelection以清除所有选定的条目。

示例：

class App extends Component {
  constructor() {
    super();
    this.selectionRef = createRef();
    this.items = [ 'one', 'two', 'three', 'four'];
  }

  clearSelectionUsingRef = () => {
    if(this.selectionRef) {
      this.selectionRef.current.clearSelection();
    }
  }

  render() {
    return (
      <div>
        <button onClick={this.clearSelectionUsingRef}>Clear Selection using Ref</button>
        <SelectableGroup
          className="main"
          clickClassName="tick"
          enableDeselect
          tolerance={10}
          globalMouse={true}
          ref={this.selectionRef}
          allowClickWithoutSelected={false}
        >
          <main style={{ border: "0.1rem solid crimson" }}>
            {this.items.map((item) => (
              <Item item={item} />
            ))}
          </main>
        </SelectableGroup>
      </div>
    );
  }
}

ref可以作为this.ref.current访问。进一步了解Refs in React

请注意，您还可以使用库中的组件DeselectAll来清除选择。但这只能在SelectionGroup内部使用，而ref可以在外部使用。

查看live demo on Stackblitz

如何在使用react-selectable-fast时取消所有选择

1 个答案: