【问题标题】:TouchableOpacity's onPress is not workingTouchableOpacity 的 onPress 不起作用
【发布时间】:2021-09-18 02:05:46
【问题描述】:

Task.js

export const Task = ({ addTask }) => {
  const [focusItem, setFocusItem] = useState(null);
  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 }}
          maxLength={50}
          value={focusItem}
          onSubmitEditing={()=>({ nativeEvent: { text } }) => setFocusItem(text)}
        />
        <RoundedButton
          style={styles.addSubject}
          size={50}
          title="+"
          onPress={()=>addTask(focusItem)}
        />
      </View>
    </View>
  );
};

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></Text>):
          (<Task addTask = {setTask}/>)
        }
        <Text>{task}</Text>
    </View>
  );
}

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

我尝试通过设置 Task 的值将数据从 Task 发送到 App 组件。但是 onPress 不起作用。 我可以在执行 onSubmitEditing 时看到文本已成功设置,但 onPress 什么也没做。请帮我解决这个问题。 提前致谢

【问题讨论】:

  • 您给定的代码中没有TouchableOpacity

标签: react-native onpress


【解决方案1】:

你需要改变这个

onSubmitEditing={()=>({ nativeEvent: { text } }) => setFocusItem(text)}

onSubmitEditing={({ nativeEvent: { text } }) => setFocusItem(text)}

您也可以参考I want to update the parent according to the change of the child to react native

【讨论】:

  • 实际上第一个更改不是必需的,因为setTask 是对useState 钩子的setter 的引用。
  • 是的,你是对的。 A 修改了我的答案。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-11-22
  • 2018-06-22
  • 2020-12-06
  • 2019-05-02
  • 2020-09-19
  • 2017-08-30
相关资源
最近更新 更多