0

我在拖放 UI 中使用react-selectable-fast 。我想在 drop 事件完成时以编程方式取消选择所有内容。

文档说这是可能的：

在 SelectableGroup 上使用 ref 可以访问 ref.clearSelection() 方法以编程方式取消选择所有项目。

我尝试添加一个 refSelectableGroup并运行 ref.clearSelection()，但我得到了ref.clearSelection is not a function.

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

有人可以帮我举一个简单的例子来展示它是如何工作的吗？

4

1 回答 1

0

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

例子：

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. 查看更多关于React 中的 Refs

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

在 Stackblitz 上观看现场演示

于 2019-05-14T19:16:11.163 回答