Comment ajouter un nouvel élément (nouveau noeud) dans React?

Question

Je souhaite ajouter une nouvelle entrée (nouveau nœud) en cliquant sur le bouton (plus). Je l'implémente via appendChild(input). Nouvelle entrée apparaît sur l'écran et je peux le voir dans Developer Tools> Elements, mais Réagissez ne le voit pas.

Developer Tools > Elements

Developer Tools > React

onClickPlus(event) { 
    event.preventDefault(); 
    let button = event.currentTarget; 
    let input = button.previousSibling.cloneNode(true); 
    let name = input.getAttribute("name").split("."); 
    let newName = name[0] + '.' + (Number(name[1]) + 1); 
    input.setAttribute("name", newName); 
    let parent = button.parentNode; 
    parent.appendChild(input); 
    parent.appendChild(button); 
} 

Comment puis-je implent cela correctement?

Answer 1

J'éviterais de manipuler le DOM «manuellement» car cela changerait l'arborescence DOM et affecterait le processus de réconciliation. Cela entraînera un ré-rendu complet du composant de réaction et affectera considérablement les performances. Au lieu de cela, je voudrais utiliser une variable d'état ej. "visible" que la méthode click mettrait à jour lors du clic.

onClickPlus(event) { 
    event.preventDefault(); 
    this.setState({visible: true}) 
} 

Si vous avez besoin de rendre les instances d'entrée multiples que l'utilisateur clique sur le bouton +, le mieux serait d'avoir un tableau de ce cas dans l'état.

constructor(props){ 
    super(props) 
    this.state = { 
     inputElements: [] 
    } 
} 

onClickPlus(event) { 
    event.preventDefault(); 
    this.setState({ 
    inputElements: this.state.inputElement.concat(newElementId) 
    }) 
} 

Et de parcourir le tableau inputElement au moment du rendu. De cette façon, vous pouvez également avoir un - bouton qui élimine les champs de saisie.

Pour les formes de réaction dynamiques avec l'état global red-form FieldArray sont fortement recommandés.