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.