如何通过TouchableOpacity触发事件操作TextInput组件实现笔记保存？

要实现点击Done按钮让TextInput失焦并保存文本的功能，核心是通过useRef获取TextInput的引用，从而调用它的blur()方法，同时完善状态逻辑：

关键步骤 #

• 使用useRef创建TextInput的引用，用于后续操作组件实例
• 修正onFocus的写法（避免组件挂载时直接执行状态更新）
• 添加onBlur事件，在输入框失焦时隐藏Done按钮
• 在TouchableOpacity的点击事件中，调用TextInput的blur()方法，并执行文本保存逻辑

完整代码示例 #

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

const NotesInput = () => {
  const [text, setText] = useState('');
  const [typing, setTyping] = useState(false);
  // 创建TextInput的引用
  const inputRef = useRef(null);

  // 保存文本的函数
  const saveText = () => {
    // 这里可以添加保存逻辑，比如存入本地存储或发送到服务器
    console.log('保存的文本:', text);
  };

  return (
    <View>
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 10 }}>
        <Text>Notes</Text>
        {typing && (
          <TouchableOpacity
            onPress={() => {
              // 让TextInput失焦
              inputRef.current?.blur();
              // 执行保存操作
              saveText();
            }}
          >
            <Text style={{ color: '#007AFF' }}>Done</Text>
          </TouchableOpacity>
        )}
      </View>
      <View style={{ paddingHorizontal: 10 }}>
        <TextInput
          ref={inputRef} // 绑定引用
          multiline={true}
          textAlignVertical='top'
          value={text}
          onChangeText={(newText) => setText(newText)}
          onFocus={() => setTyping(true)} // 修正为箭头函数，避免立即执行
          onBlur={() => setTyping(false)} // 失焦时隐藏Done按钮
          style={{ borderWidth: 1, borderColor: '#ccc', borderRadius: 4, padding: 8, minHeight: 100 }}
        />
      </View>
    </View>
  );
};

export default NotesInput;

代码说明 #

• inputRef.current?.blur()：通过引用调用TextInput的失焦方法，?.是可选链操作符，避免引用为null时报错
• onFocus={() => setTyping(true)}：必须用箭头函数包裹，否则组件挂载时就会触发setTyping(true)
• saveText函数：可以根据需求替换为实际的保存逻辑，比如使用AsyncStorage存储到本地，或者调用API上传到服务器

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