清除 React Native TextInput

在 React Native 中，TextInput 是一个常用的组件，它提供了一些默认的样式和功能。然而，有时我们需要清除输入框中的内容，本文将介绍几种方法实现该功能。

直接修改输入框的值

第一种方法是直接修改输入框的值。我们可以用 useState 来定义输入框的值，并在需要清除时将其设为空字符串。

import React, { useState } from 'react';
import { TextInput, Button, View } from 'react-native';

export default function App() {
  const [text, setText] = useState('');

  const clearText = () => {
    setText('');
  }

  return (
    <View>
      <TextInput value={text} onChangeText={setText} />
      <Button title="Clear" onPress={clearText} />
    </View>
  );
}

这里我们在 useState 中定义了一个名为 text 的变量，它的初始值为一个空字符串。在输入框的 value 属性中我们传入了这个变量，从而将输入框的值与 text 绑定起来。当点击清除按钮时，我们调用 clearText 函数将 text 设为空字符串，从而清空输入框的内容。

使用 Ref 获取 TextInput 实例

第二种方法是使用 useRef 获取 TextInput 的实例，并通过该实例的方法清空输入框。

import React, { useRef } from 'react';
import { TextInput, Button, View } from 'react-native';

export default function App() {
  const inputRef = useRef(null);

  const clearText = () => {
    inputRef.current.clear();
  }

  return (
    <View>
      <TextInput ref={inputRef} />
      <Button title="Clear" onPress={clearText} />
    </View>
  );
}

这里我们使用 useRef 来定义了一个名为 inputRef 的变量，它的初始值为 null。在 TextInput 的 ref 属性中我们传入了这个变量，从而获取了 TextInput 的实例。当点击清除按钮时，我们调用 clear 方法来清空输入框的内容。

总结

以上两种方法都可以实现清除 TextInput 的功能，具体取决于程序员的个人喜好和需求。值得注意的是，在使用 Ref 获取 TextInput 实例时，需要确保 TextInput 已经被渲染，否则获取到的实例将为 null。