0
276
Views¿El área de texto HTML dentro del componente ReactJS no se puede seleccionar mediante programación sin setTimeout?
Tengo un componente ReactJS con un HTML <textarea> dentro.
El <textarea> tiene el atributo de value rellenado previamente (ver más abajo... Estoy generando un enlace para que el usuario lo copie).
Quiero seleccionar automáticamente el contenido <textarea> para que sea más conveniente para el usuario copiar el texto. Estoy tratando de hacer esto en la llamada React componentDidMount . Funciona... más o menos .
Por lo que puedo decir, el componente se está montando tan lentamente que el proceso aún está en curso incluso cuando ya se está llamando al componentDidMount . La razón por la que digo esto es: si llamo a myTextarea.select() directamente dentro de componentDidMount , falla el 100 % de las veces. Sin embargo, si pongo .select() en una setTimeout(...) para que espere un poco antes de intentar seleccionar el contenido, funciona el 100% del tiempo.
Editar / nota: después de hurgar un poco más, descubrí un sentimiento que indica que usar setTimeout(...) para este propósito es una mala práctica, por lo que ahora estoy aún más ansioso por evitar usarlo.
¿Qué me podría estar perdiendo, y hay una mejor manera de lograr esto?
Esto es lo que tengo.
Esta versión falla.
var GenerateLinkUi = React.createClass({ componentDidMount: function() { document.getElementById('cyoag-generated-link-textarea').select(); }, render: function () { return ( <div id='cyoag-generate-link-ui'> <textarea readOnly id='cyoag-generated-link-textarea' value={config.hostDomain + 'link?id=' + this.props.nodeUid} /> </div> ); } });Esta versión tiene éxito.
var GenerateLinkUi = React.createClass({ componentDidMount: function() { setTimeout(function(){ document.getElementById('cyoag-generated-link-textarea').select(); }, 500); }, render: function () { return ( <div id='cyoag-generate-link-ui'> <textarea readOnly id='cyoag-generated-link-textarea' value={config.hostDomain + 'link?id=' + this.props.nodeUid} /> </div> ); } }); Editar: esto fue marcado como duplicado. La pregunta vinculada plantea más preguntas para mí y no proporciona una respuesta clara, como se analiza en los comentarios a continuación. Si ref se ejecuta después de que se monta el componente, y componentDidMount también se ejecuta "después" del montaje del componente, me cuesta entender la diferencia entre los dos, más allá del hecho de que a ref se le pasa un elemento DOM como argumento; donde en componentDidMount tendría que usar document.getElementById o algo así. Apreciaría si alguien pudiera describir las diferencias más profundas entre los dos.
Mientras tanto, encontré otras soluciones para este problema, pero todavía estoy ansioso por aprender más sobre el tema.
2 answers
Answer question0
Voy a adivinar lo que está pasando.
¿El componente se vuelve a renderizar después de componentDidMount ? Me imagino que volverá a representar el área de textarea y sobrescribirá el select() porque lo ha hecho en el DOM real y no en el virtual.
Funciona cuando se usa setTimeout porque lo hace después de todos los renderizados que ocurrieron después de componentDidMount . Me imagino que si actualizara los accesorios nuevamente, sobrescribiría el select() nuevamente.
Usa referencias para resolver esto.
var GenerateLinkUi = React.createClass({ componentDidMount: function() { this.textArea.select(); }, setTextArea: function(ref) { this.textArea = ref; } render: function () { return ( <div id='cyoag-generate-link-ui'> <textarea ref={this.setTextArea} readOnly id='cyoag-generated-link-textarea' value={config.hostDomain + 'link?id=' + this.props.nodeUid} /> </div> ); } });0
La técnica para hacerlo se llama refs callback .
React admite un atributo especial que puede adjuntar a cualquier componente. El atributo ref toma una función de devolución de llamada, y la devolución de llamada se ejecutará inmediatamente después de montar o desmontar el componente.
Por cierto, está utilizando el método componentDidMount correcto.
Los árbitros están ahí para ti
Está presente en ReactClass.