React Native应用程序上的Add函数不起作用

Question

我正在使用React Native构建一个焦点时间应用程序。我已经添加了文本输入以及添加功能的创建。但是当我输入文本并点击添加按钮时，文本并没有被添加到背景中。我能请你们帮忙吗。我不太清楚我到底做错了什么。我正在设置并捕获插入到文本字段中的值。

提前谢谢

const styles = StyleSheet.create({
container: {
flex: 1,
padding: 50,
},
titleContainer: {
flex: 0.5,
padding: 16,
justifyContent: 'center',
},
mainText: {
color: 'white',
fontWeight: 'bold',
fontSize: 16,
},
inputContainer: {
paddingTop: 20,
flexDirection: 'row',
alignItems: 'center',
},
});
//Default app
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#587596',
},
});

import React, { useState } from 'react';
import { Text, View, StyleSheet, Platform } from 'react-native';
import Constants from 'expo-constants';
import { TextInput } from 'react-native-paper';
import { RoundedButton } from '../../components/RoundedButton';
export const Focus = ({ addSubject }) => {
const [tmpItem, setTmpItem] = useState(null);
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.mainText}>What would you like to folcus on?</Text>
<View style={styles.inputContainer}>
<TextInput
style={{ flex: 1, marginRight: 20 }}
onSubmitEditing={({ nativeEvent }) => {
setTmpItem(nativeEvent.text);
}}
/>
<RoundedButton
size={50}
title="+"
onPress={() => {
addSubject(tmpItem);
}}
/>
</View>
</View>
</View>
);
};
//Default app
import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { Focus } from './src/features/focus/Focus';
export default function App() {
const [focusSubject, setFocusSubject] = useState(null);
return (
<View style={styles.container}>
{focusSubject ? (
<Text>bla bla bla</Text>
) : (
<Focus addSubject={setFocusSubject} />
)}
<Text>{focusSubject}</Text>
</View>
);
}

`

Answer 1

问题是由于使用了TextInput->onSubmitEditing、onSubmitEditing回调的发生方式不同，

来自文档：onSubmitEditing

当按下文本输入的提交按钮时调用的回调参数为｛nativeEvent:｛text，eventCount，target｝｝。

当TextInput字段发生更改时，添加onChangeText回调以更新状态tmpItem。

<TextInput
style={{flex: 1, marginRight: 20}}
onChangeText={text => setTmpItem(text)}
onSubmitEditing={({nativeEvent}) => {
setTmpItem(nativeEvent.text);
}}
/>