React Native中onPress调用setText('')无效，如何清空TextInput？

原代码的核心问题 #

• 普通变量无法持久化状态：全局的notes数组和未声明的last_press_key是组件内普通变量，组件每次重渲染时会被重置，且更新它们不会触发React的状态更新机制，导致数据丢失或界面不响应。
• 未声明变量报错：last_press_key未定义就直接使用，会抛出ReferenceError。
• 未正确接收props：组件函数未传入props参数，却在style和children中使用props，导致报错。
• 双击逻辑不严谨：仅靠记录上次按键值判断双击，没有时间间隔限制，容易误触发，且状态更新方式错误。

修正后的代码 #

import { useState, useEffect } from 'react';
import { TextInput, Alert, Font } from 'react-native';

const CustomTextInput = (props) => {
  const [fontLoaded, setFontLoaded] = useState(false);
  const [text, setText] = useState('');
  const [notes, setNotes] = useState([]);
  // 记录上次按下Enter的时间，用时间差判断双击
  const [lastEnterPressTime, setLastEnterPressTime] = useState(null);

  const handleKeyPress = (e) => {
    const key = e.nativeEvent.key;
    const currentTime = Date.now();
    
    if (key === "Enter") {
      // 500ms内连续按Enter判定为双击，可根据需求调整时间
      if (lastEnterPressTime && currentTime - lastEnterPressTime < 500) {
        // 用函数式更新确保拿到最新的notes数组
        setNotes(prevNotes => [...prevNotes, text]);
        setText('');
        Alert.alert('笔记已添加', `当前笔记：${notes.join(', ')}`);
        setLastEnterPressTime(null); // 重置避免连续触发
      } else {
        setLastEnterPressTime(currentTime);
      }
    } else {
      // 非Enter按键时重置记录
      setLastEnterPressTime(null);
    }
  };

  useEffect(() => {
    async function loadFont() {
      await Font.loadAsync({
        'custom-font': require('./assets/fonts/MonospaceRegular.ttf'),
      });
      setFontLoaded(true);
    }
    loadFont();
  }, []);

  if (!fontLoaded) {
    return <TextInput placeholder="Loading..." />;
  }

  return (
    <TextInput
      multiline={true}
      value={text}
      onKeyPress={handleKeyPress}
      style={{ ...props.style, fontFamily: 'custom-font' }}
      onChangeText={setText}
      placeholder="输入内容，双击Enter添加笔记"
    />
  );
};

export default CustomTextInput;

关键修改说明 #

1. 用useState管理状态：把notes和双击判定用的lastEnterPressTime改为React状态，确保状态变化能触发组件重渲染并持久化。
2. 时间差判断双击：通过记录两次Enter按键的时间差（500ms）判断双击，逻辑更严谨，避免误触。
3. 修复props传递：组件函数接收props参数，解决未定义props的报错。
4. 优化状态更新方式：更新notes时使用函数式更新，确保获取最新的数组状态，避免数据覆盖。
5. 移除无用代码：删掉空的onTextChange函数，简化onChangeText的写法。

内容的提问来源于stack exchange，提问作者Roman Guskov