Tener el siguiente fragmento de código:
<div> <Input id='id' disabled value='test' /> <Button onClick={copyToClipboard} /> </div> El botón, cuando se hace clic, debe copiar el valor de la entrada, que ya está configurado para test .
Entonces, copyToClipboard debe realizar la operación:
const copyToClipboard = () => { ... };Como lo he probado:
import { useRef, useState } from 'react'; ... const [copySuccess, setCopySuccess] = useState(''); const textAreaRef = useRef(null); function copyToClipboard(e) { textAreaRef.current.select(); document.execCommand('copy'); e.target.focus(); setCopySuccess('Copied!'); } ... <div> <Input ref={textAreaRef} id='id' value='test' /> <Button onClick={copyToClipboard} /> </div> Tiene un error que dice: Object is possibly 'null'.ts(2531) for textAreaRef.current.select(); . Estoy usando React con Typescript.
textAreaRef.current es posiblemente null . De hecho, null es el valor inicial predeterminado en el que ha establecido textAreaRef .
const textAreaRef = useRef(null); Lo que dice la advertencia es que textAreaRef.current es posiblemente null , pero está accediendo a él de una manera insegura para invocar la función de select .
Es posible que pueda usar el operador de encadenamiento opcional ( Typescript 3.7 ):
textAreaRef.current?.select();O simplemente usa una cláusula de verificación/guardia nula:
textAreaRef.current && textAreaRef.current.select();