如何访问 React Native 内置组件的方法？

Question

作为 React Native 的初学者，我无法在任何地方找到解决方案。例如 React Native Docs

我想访问 .focus、.blur、clear() 方法。

Here in documentation.

提前致谢。

Answer 1

更新:

您应该使用如下方式为输入文本字段分配引用：

const textInputRef = useRef(null);
...
<TextInput
    ref={(input) => { textInputRef = input; }}
    placeholder="Text Input"
/>

并使用此 ref 触发 .focus 等事件。

例如

<Button
    label="Focus on Input"
    onClick={() => { this.textInputRef.current.focus(); }}
/>

更多详情可以参考下面的回答

旧答案（根据我对问题的理解）：

您可以使用类似的道具轻松使用这些事件（基于您使用的组件）

例如，对于 TextInput

import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";

const UselessTextInput = () => {
  const [text, onChangeText] = React.useState("Useless Text");
  const [focused, setFocused] = React.useState(null);

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        value={text}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default UselessTextInput;

Answer 2

要使用这些命令式方法，请将组件实例存储在 React 引用中。

const UselessTextInput = () => {
  const textInputRef = React.useRef(null); // new
  const [text, onChangeText] = React.useState("Useless Text");
  const [focused, setFocused] = React.useState(null);
  
  return (
    <SafeAreaView>
      <TextInput
        ref={textInputRef}
        style={styles.input}
        onChangeText={onChangeText}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        value={text}
      />
      {/* New */}
      <TouchableOpacity onPress={() => textInputRef.current?.focus()}>
        <Text>Focus text input</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

您可以在 "Refs and the DOM" section of the React docs 中阅读更多相关信息。

Answer 3

import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
} from "react-native";
import React, { useRef, useState } from "react";

export default function App(props) {
  const textInputRef = useRef(null);
  const [text, setText] = useState("Useless Text");
  const [focused, setFocused] = useState(null);

  return (
    <View style={styles.container}>
      <TextInput
        ref={textInputRef}
        style={styles.input}
        onChangeText={setText}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        value={text}
      />
      <TouchableOpacity
        style={styles.button}
        onPress={() => textInputRef.current.clear()}
      >
        <Text>Clear text input</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  button: {
    backgroundColor: "dodgerblue",
    margin: 50,
    padding: 20,
    borderRadius: 20,
  },
  input: {
    backgroundColor: "green",
    height: 100,
    width: 300,
    borderRadius: 25,
    textAlign: "center",
  },
});

我终于用到了这个，仅供其他用户参考。

如何访问 React Native 内置组件的方法？

How can I access methods of react native built in components?

reactjs

react-native