Estoy haciendo un componente de entrada personalizado.
const CustomInput = (props) => { console.log(props); return ( <TextInput {...props} ref={props.ref} placeholder={props.placeholder} style={{ ...styles.text, ...props.style }} /> ); };en el archivo quiero usarlo tengo
const ForgottenPasswordScreen = (props) => { ... const inputRef = React.createRef(); useEffect(() => { inputRef.current.focus(); }, []); ... <CustomInput placeholder={"E-mail..."} value={email.value} ref={inputRef} onChangeText={(text) => setEmail({ value: text, error: "" })} /> ...Si estoy usando TextInput normal, no hay problema, pero cuando trato de usar CustomInput, aparece el error
TypeError: null no es un objeto (evaluando 'inputRef.current.focus')
No entiendo por qué ref={props.ref} no está haciendo el trabajo. Pensé que la referencia también se pasará a mi componente. ¿Cómo pasar la referencia correctamente?
El árbitro no está dentro de props . Cuando se usa ref como accesorio, los componentes de función deben crearse con forwardRef() , que toma una función que tiene dos argumentos, props y ref .
Aquí está el ejemplo de la documentación https://reactjs.org/docs/forwarding-refs.html
const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button> )); // You can now get a ref directly to the DOM button: const ref = React.createRef(); <FancyButton ref={ref}>Click me!</FancyButton>;Entonces con esto podemos determinar si queremos que seleccione la entrada o no
la razón es que la referencia no se puede transmitir ya que es una referencia a ese componente a menos que use React.forwardRef pero esta es una forma sin forwardRef
importar { useEffect, useRef } de "reaccionar"; importar "./estilos.css";
const InsantSelectInput = (props) => { const inputRef = useRef(null) useEffect(() => { if(inputRef && inputRef.current) inputRef.current.focus() }, [inputRef]) return <input {...props} ref={inputRef} placeholder={props.placeholder} />; } const CustomInput = (props) => { return <> {props.isSelectedInput && <InsantSelectInput {...props} />} {!props.isSelectedInput && <input {...props} placeholder={props.placeholder} />} </> }; export default function App() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <CustomInput placeholder={"E-mail..."} value={""} isSelectedInput onChangeText={(text) => console.log({ value: text, error: "" })} /> </div> ); }O con forwardRef
const CustomInput = React.forwardRef((props, ref) => { return <> <TextInput {...props} ref={ref} placeholder={props.placeholder} style={{ ...styles.text, ...props.style }} /> }); const ForgottenPasswordScreen = (props) => { ... const inputRef = React.createRef(); useEffect(() => { inputRef.current.focus(); }, []); ... <CustomInput placeholder={"E-mail..."} value={email.value} ref={inputRef} onChangeText={(text) => setEmail({ value: text, error: "" })} /> ...