Je perds le focus sur une entrée jsx créée dynamiquement lorsque l'état est mis à jour

Question

J'ai un certain nombre de champs qui sont produits dynamiquement à partir de tableaux et qui sont liés à une branche d'état redux. La valeur d'entrée est correctement mappée à l'état, puis de nouveau au composant. Le problème est qu'il perd le focus, vous devez re cliquer sur l'élément d'entrée. J'ai essayé de contourner ce problème en mettant automatiquement au point le dernier champ mis à jour, mais il se concentre au début du texte pour que vous puissiez écrire à l'envers. J'ai cherché des solutions à ce problème, mais ils ont tous besoin de travailler directement sur le dom ou en utilisant "onFocus =" this.value = value "qui, en tant qu'attribut jsx, ne fonctionnera pas

Y at-il quelque chose que je fais mal ici Pourquoi ne réagit pas se rappeler le champ à se concentrer automatiquement comme il le fait avec des éléments d'entrée jsx statiques

Voici le code qui produit les champs:

const renderFields = (fields, target) => { 
    if(!fields) return <div></div> 
    return fields.map(field => { 
     let input = [] 
     if(field.type==="text") { 
     input.push(<input key={generateUID()} type="text" onChange={e=>onChange(field, e.target.value, target)} autoFocus={field.hasFocus} value={field.value} />) 
     } else if(field.type==="radio") { 
     let values = field.control.match(/\[(.+)\]/)[1].split(",") 
     input = values.map(value => { 
      return (<label key={generateUID()}><input name={field.id} onChange={e=>onChange(field, value, target)} type="radio" value={value} key={generateUID()} style={{display: "inline-block"}} /> {value}</label>) 
     }) 
     } 
     return (
     <div key={generateUID()}> 
      <label>{field.label}</label> 
      <br /> 
      {input} 
     </div> 
    ) 
    }) 
    } 

Je vous remercie de toute aide

Answer 1

Je pense que le problème est que generateUID() produit une sortie unique chaque fois qu'il est appelé, forçant React à reconstruire ce champ dans le DOM virtuel. D'une manière générale, vous ne devez pas générer au hasard key s. Une possibilité est d'utiliser l'index d'entrée comme une clé candidate:

fields.map(field => { 
    ... 
    input = values.map((value, inputIdx) => { 
    return (
     <label key={generateUID()}> 
     <input 
      name={field.id} 
      onChange={e=>onChange(field, value, target)} 
      type="radio" 
      value={value} 
      key={`fieldInput-${inputIdx}`} 
      style={{display: "inline-block"}} /> 
     {value} 
     </label> 
    ) 
    }) 
}) 

Answer 2

Le problème est que vous générez des UID f ou vos clés, donc quand React rend les composants, ils ont toujours de nouvelles clés. Essayez d'utiliser une clé définie d'une autre manière, qui sera cohérente à travers un rendu.