ref 属性未传递，TypeError: null 不是对象（评估“inputRef.current.focus”）

Question

制作一个自定义输入组件

const CustomInput = (props) => {
  console.log(props);
  return (
    <TextInput
      {...props}
      ref={props.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: "" })}
        />
...

，我想使用它，如果我使用普通的 TextInput 则没有问题，但是当我尝试使用我的 CustomInput 时， 我得到错误

类型错误：null不是对象（评估“inputRef.current.focus”）

我不明白为什么 ref={props.ref} 没有完成这项工作。我认为 ref 也会传递给我的组件。如何正确传递ref？

Answer 1

ref 不在 props 内部。使用 ref 作为 prop 时，应使用 forwardRef() 创建 FunctionComponent，该函数采用具有两个参数的函数：props 和 参考。

这是文档 https://reactjs.org/docs/forwarding-refs.html< 中的示例/a>

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>;

Answer 2

因此，通过这个，我们可以确定是否希望它选择输入，

原因是 ref 无法向下传递，因为它是对该组件的引用，除非您使用 React.forwardRef 但这是一种没有forwardRef

import { useEffect 的 方法, useRef } 来自“反应”；
导入“./styles.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>
  );
}

或与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: "" })}
        />
...