Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

152
Vistas
Create Antd Tree based on checked Node of another Antd Tree

I want to create a Tree antd data with only checked nodes of another Tree data, please take a look here image

When I Check some nodes and click on validate, I want to be able to filter only checked/half checked data from my data and create another Tree with new data. This is my sandbox, please take a look :) https://codesandbox.io/s/modern-browser-glh4n?file=/index.js

Example with images : When i check this node and i click on validate : image when I select nodes , I expect to get this result : expected result Thank you

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

I've created a recursive method to create new tree data based on checked and half checked tree nodes, actually it filters the original tree with it's sub tree.

here's the updated codesandbox :

const createNewTreeData = (treeData, checkedKeys) => {
  return treeData.reduce((acc, treeDataItem) => {
    if (checkedKeys.includes(treeDataItem.key)) {
      if (treeDataItem.children) {
        acc.push({
          ...treeDataItem,
          children: createNewTreeData(treeDataItem.children, checkedKeys)
        });
      } else {
        acc.push(treeDataItem);
      }
    }

    return acc;
  }, []);
};

And in onCheck event I've added halfchecked nodes to allChecked state like this:

onCheck = (checkedKeys, e) => {
    const allCheckedKeys = [...checkedKeys, ...e.halfCheckedKeys];
    this.setState((prevState) => ({
      ...prevState,
      allCheckedKeys,
      checkedKeys
    }));
};
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda