Así que estoy tratando de hacer una interacción que sea similar al explorador de archivos en VSCode. Muestro una lista de elementos y hago clic en un elemento para seleccionarlo. Quiero poder presionar Intro cuando se seleccione un elemento para que ese elemento sea editable.
Mi primer intento fue usar la propiedad contentEditable , ya que parecía la manera más fácil de activar y desactivar la edición en mi div:
... render( <div contentEditable={this.state.isEditable}> {this.state.text} </div> )Pero cuando uso este método, recibo esta advertencia:
[Error] Advertencia: un componente es
contentEditablepor contenido y contiene elementoschildrenadministrados por React. Ahora es su responsabilidad garantizar que ninguno de esos nodos se modifique o duplique inesperadamente. Esto probablemente no sea intencional.
Si entiendo correctamente, contentEditable está rompiendo la convención de React, y esto puede causar problemas si uso este método.
Como he leído más sobre contentEditable en general, también he visto que hay algunos problemas con el HTML generado en el interior que es inconsistente en diferentes navegadores.
Entonces, mi pregunta es, ¿cuál sería la mejor práctica estándar para lograr algo como esto en el que quiero cambiar entre un elemento de solo visualización y un elemento de entrada? ¿Debería usar una etiqueta de entrada y deshabilitarla en lugar de habilitarla?
Puede considerar usar los atributos nativos de entrada, solo lectura/deshabilitados, según su caso de uso, por ejemplo:
<input readOnly={!this.state.isEditable}/>contenteditable le dará HTML, pero no está usando this.state.text como HTML (solo texto), y como ha notado, el HTML varía de un navegador a otro. Cambiaría una input con estilo para el div :
return this.state.isEditable ? <input className="styling-class" type="text" value={this.state.text} /> : <div>{this.state.text}</div> ;