React Native中TouchableOpacity的onPress点击无响应 跨组件传值失败

核心问题点 #

• TextInput绑定了受控属性value={focusItem}，但缺失onChangeText回调，用户输入内容时focusItem状态不会同步更新，始终为初始值null。点击按钮时传递null给父组件的setTask，父组件task状态无变化，视觉上就像按钮没有响应。
• onSubmitEditing回调写法错误，当前是两层箭头函数结构，事件触发时仅会返回内层函数，不会实际执行setFocusItem逻辑，之前判定该事件生效属于误判。

修复后的代码 #

Task.js #

// 注意补充缺失的导入
import React, { useState } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
// 导入你封装的RoundedButton
import RoundedButton from '你的RoundedButton路径';

export const Task = ({ addTask }) => {
  const [focusItem, setFocusItem] = useState(''); // 初始值设为空字符串更合理
  return (
    <View style={styles.titleContainer}>
      <Text style={styles.title}>What would you like to focus on?</Text>
      <View style={styles.container}>
        <TextInput
          style={{ flex: 1, backgroundColor: '#fff', paddingHorizontal: 10, height: 40 }}
          maxLength={50}
          value={focusItem}
          // 新增onChangeText同步输入内容到状态
          onChangeText={setFocusItem}
          // 修正onSubmitEditing写法
          onSubmitEditing={({ nativeEvent: { text } }) => addTask(text)}
        />
        <RoundedButton
          style={styles.addSubject}
          size={50}
          title="+"
          onPress={() => addTask(focusItem)}
        />
      </View>
    </View>
  );
};

// 保留你原有样式即可
const styles = StyleSheet.create({
  // 你的原有样式代码
});

App.js #

原有逻辑无问题，可根据需求调整任务存在时的渲染内容：

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import {Task} from './src/features/task/Task'

export default function App() {
  const [task, setTask] = useState(null);
  return (
    <View style={styles.container}>
      {
        task ? 
        (<Text style={{color: '#fff', fontSize: 18, marginTop: 20}}>当前待办：{task}</Text>):
        (<Task addTask={setTask}/>)
      }
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#425670',
    paddingTop: Constants.statusBarHeight,
    paddingHorizontal: 16,
  },
});

验证逻辑 #

修改完成后：

1. 输入内容时focusItem会同步更新
2. 点击+按钮可正常把输入内容传递给父组件，显示待办内容
3. 点击软键盘的完成按钮也可触发提交逻辑

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