在 React Native 功能组件中未定义 useRef.current

Question

I'm trying to focus a text input field once the user clicks a button. The code looks as follows:

const refName = React.useRef();

const changeFocus = () => {
    refName.current.focus();
}

with the text input having an attribute ref defined as refName . This gives me an error ( undefined is not an object (evaluating 'refName.current.focus') ), and when I rewrite the changeFocus function as console.log(refName) this is what I get:

Object {
  "current": undefined,
}

I'm not sure how else I'm supposed to define the reference or how else to approach this problem. Thanks

Answer 1

You initialize your ref without a value, so there will be a moment that ref.current is undefined before it gets the value of the component that you attach it to.

You need to make your function call conditional so that it only happens if ref.current has been set:

const changeFocus = () => {
    refName.current?.focus();
}

You also need to declare the expected type for the ref, since it cannot be inferred from an initial value. The type could be the type of the specific component or it could be this:

interface Focusable {
  focus(): void;
}

const refName = React.useRef<Focusable>();

That should fix errors that you get when setting the ref property on the component.