De acuerdo con el documento API, debe haber un accesorio de consulta de búsqueda que mencioné en mi código, pero la búsqueda no parece estar funcionando.
El documento API no explica cómo implementarlo y los ejemplos disponibles en línea no parecen funcionar en el espacio aislado de código.
El único artículo disponible que parece explicar la búsqueda tiene un código incorrecto (accesorios duplicados): https://frugalisminds.com/how-to-create-react-sortable-tree/
Documento API: https://www.npmjs.com/package/react-sortable-tree
A continuación se muestra el código:
import React, { Component } from "react"; import SortableTree from "react-sortable-tree"; import "react-sortable-tree/style.css"; export default class Tree extends Component { constructor(props) { super(props); this.state = { treeData: [ { title: "Chicken", children: [{ title: "Egg" }] }, { title: "Fish", children: [{ title: "fingerline" }] }, ], searchString: "" }; } handleSearchOnChange = e => { this.setState({ searchString: e.target.value, }); }; render() { return ( <div style={{ height: 400 }}> <input type="search" onChange={this.handleSearchOnChange} className="form-control" /> <SortableTree searchQuery={this.state.searchString} treeData={this.state.treeData} onChange={treeData => this.setState([...treeData])} isVirtualized={false} /> </div> ); } }falta un searchFocusOffset para resaltar el elemento encontrado y un método de búsqueda que se puede definir de forma personalizada dentro del método de procesamiento de la siguiente manera:
import React, { Component } from "react"; import SortableTree from "react-sortable-tree"; import "react-sortable-tree/style.css"; // This only needs to be imported once in your app export default class Tree extends Component { constructor(props) { super(props); this.state = { treeData: [ { title: "Chicken", children: [{ title: "Egg" }] }, { title: "Fish", children: [{ title: "fingerline" }] }, ], searchString: "" }; } render() { // Case insensitive search of `node.title` const customSearchMethod = ({ node, searchQuery }) => searchQuery && node.title.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1; return ( <div style={{ height: 400 }}> <input type="search" onChange={event => this.setState({ searchString: event.target.value })} className="form-control" /> <SortableTree searchMethod={customSearchMethod} searchQuery={this.state.searchString} searchFocusOffset={0} treeData={this.state.treeData} onChange={treeData => this.setState([...treeData])} isVirtualized={false} /> </div> ); } }