ref prop is not passed, TypeError: null is not an object (evaluating '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 时，我收到错误

TypeError: null is not an object (evaluating 'inputRef.current.focus')

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

Answer 1

ref 不在 props 内。当使用 ref 作为 prop 时，FunctionComponents 应该使用 forwardRef() 创建，它接受一个有两个参数的函数，props 和 ref.

这是文档中的示例 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>;

Answer 2

因此我们可以确定是否要select输入

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

的方法

从“反应”导入{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>
  );
}

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

ref prop is not passed, TypeError: null is not an object (evaluating 'inputRef.current.focus')

ref prop is not passed, TypeError: null is not an object (evaluating 'inputRef.current.focus')

javascript

reactjs

react-native

ref