Question

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

2022-03-18

1646

javascript reactjs react-native ref

我正在制作一个自定义输入组件


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 时，应使用 forwardRef() 创建 FunctionComponents，该函数接受一个具有两个参数 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

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

原因是，由于使用React.ForwardRef.forwardref，因此不能传递ref，因为它是对该组件的ref。但这是一种没有forwardRef

的方式，从“ react”中import {usefeft，useref}；导入“ ./styles.css”;

842513595

tith forwardRef

9598999683 >