如何在 React Native 中单击按钮时专注于 TextInput

Question

当我单击编辑按钮时，我试图将焦点设置在 TextInput 上，但出现错误。

下面是我的代码：

const MyProfileScreen = (props: any) => {
    const refsFocus = useRef(null);
    return (
        <>
            <View>
                <TextInput
                    placeholder={'editable test'}
                    placeholderTextColor={'red'}
                    style={{color: 'red'}}
                    ref={refsFocus}
                />
            </View>
            <TouchableOpacity
                onPress={()=> { refsFocus.current.focus();} }
                >
                <Text>Edit text input</Text>
            </TouchableOpacity>
        </>
    );
};

但我在onPress={()=> { refsFocus.current.focus()} } 上遇到错误

错误信息：

Object is possibly 'null'

const refsFocus: React.MutableRefObject<null>

我无法弄清楚我做错了什么

Answer 1

您应该像这样将 useRef 挂钩分配给 Textinput ref

ref={refsFocus}

然后在 onPress 方法中你应该这样调用它

onPress={()=> { refsFocus.current.focus()} }

同时从 onPress 箭头函数中删除分号。