我在react native中创建了一个简单的应用程序,其中文本在按钮按下后显示在控制台中。按下按钮后,我在控制台中收到一些意外的输出。请告诉我有什么可以改变的,或者我在这里做错了什么?
import { useState } from 'react';
import { StyleSheet, Text, View, Button, TextInput } from "react-native";
export default function App() {
const [enteredGoalText, setenteredGoalText] = useState();
function goalInputHandler(enteredText) {
setenteredGoalText(enteredText);
}
function addGoalHandler() {
console.log(enteredGoalText);
}
return (
<View style={styles.appContainer}>
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
placeholder="Your course goal!!"
onChange={goalInputHandler}
/>
<Button title="Add goal" onPress={addGoalHandler} />
</View>
<View style={styles.goalsContainer}>
<Text>List of goals....</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
appContainer: {
flex: 1,
paddingTop: 50,
paddingHorizontal: 16,
},
inputContainer: {
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 24,
borderBottomWidth: 1,
borderBottomColor: "#cccccc",
},
textInput: {
borderWidth: 1,
borderColor: "#cccccc",
width: "70%",
marginRight: 8,
padding: 8,
},
goalsContainer: {
flex: 5,
},
});
我在控制台中得到以下输出
"_dispatchInstances": {
"_debugHookTypes": null,
"_debugNeedsRemount": false,
"_debugOwner": {
"_debugHookTypes": [Array],
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": undefined,
"actualDuration": 0.3320891857147217,
"actualStartTime": 829945578.402573,
"alternate": [FiberNode],
"child": [FiberNode],
"childLanes": 0,
"deletions": null,
"dependencies": null,
"elementType": [Function InternalTextInput],
"flags": 8388613,
"index": 0,
"key": null,
"lanes": 0,
"memoizedProps": [Object],
"memoizedState": [Object],
"mode": 2,
"pendingProps": [Object],
"ref": null,
"return": [FiberNode],
"selfBaseDuration": 0.2843759059906006,
"sibling": null,
"stateNode": null,
"subtreeFlags": 516,
"tag": 0,
"treeBaseDuration": 0.31690704822540283,
"type": [Function InternalTextInput],
"updateQueue": [Object]
},
"_debugSource": undefined,
"actualDuration": 0.022422194480895996,
"actualStartTime": 829945578.710574,
"alternate": {
"_debugHookTypes": null,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": undefined,
"actualDuration": 0.021181941032409668,
"actualStartTime": 829945576.637425,
"alternate": [Circular],
"child": null,
"childLanes": 0,
"deletions": null,
"dependencies": null,
"elementType": "RCTSinglelineTextInputView",
"flags": 516,
"index": 0,
"key": null,
"lanes": 0,
"memoizedProps": [Object],
"memoizedState": null,
"mode": 2,
"pendingProps": [Object],
"ref": [Function forwardRef],
"return": [FiberNode],
"selfBaseDuration": 0.01284801959991455,
"sibling": null,
"stateNode": [ReactNativeFiberHostComponent],
"subtreeFlags": 0,
"tag": 5,
"treeBaseDuration": 0.01284801959991455,
"type": "RCTSinglelineTextInputView",
"updateQueue": null
},
"child": null,
"childLanes": 0,
"deletions": null,
"dependencies": null,
"elementType": "RCTSinglelineTextInputView",
"flags": 516,
"index": 0,
"key": null,
"lanes": 0,
"memoizedProps": {
"accessibilityState": [Object],
"accessible": true,
"allowFontScaling": true,
"autoComplete": undefined,
"caretHidden": undefined,
"dataDetectorTypes": undefined,
"editable": undefined,
"focusable": true,
"forwardedRef": null,
"keyboardType": undefined,
"mostRecentEventCount": 19,
"onBlur": [Function _onBlur],
"onChange": [Function _onChange],
"onChangeSync": null,
"onClick": [Function onClick],
"onContentSizeChange": undefined,
"onFocus": [Function _onFocus],
"onKeyPressSync": undefined,
"onResponderGrant": [Function onResponderGrant],
"onResponderMove": [Function onResponderMove],
"onResponderRelease": [Function onResponderRelease],
"onResponderTerminate": [Function onResponderTerminate],
"onResponderTerminationRequest": [Function onResponderTerminationRequest],
"onScroll": [Function _onScroll],
"onSelectionChange": [Function _onSelectionChange],
"onSelectionChangeShouldSetResponder": [Function emptyFunctionThatReturnsTrue],
"onStartShouldSetResponder": [Function onStartShouldSetResponder],
"placeholder": "Your course goal!!",
"rejectResponderTermination": true,
"returnKeyType": undefined,
"selection": null,
"style": [Object],
"submitBehavior": "blurAndSubmit",
"text": "",
"textContentType": undefined,
"underlineColorAndroid": "transparent"
},
"memoizedState": null,
"mode": 2,
"pendingProps": {
"accessibilityState": [Object],
"accessible": true,
"allowFontScaling": true,
"autoComplete": undefined,
"caretHidden": undefined,
"dataDetectorTypes": undefined,
"editable": undefined,
"focusable": true,
"forwardedRef": null,
"keyboardType": undefined,
"mostRecentEventCount": 19,
"onBlur": [Function _onBlur],
"onChange": [Function _onChange],
"onChangeSync": null,
"onClick": [Function onClick],
"onContentSizeChange": undefined,
"onFocus": [Function _onFocus],
"onKeyPressSync": undefined,
"onResponderGrant": [Function onResponderGrant],
"onResponderMove": [Function onResponderMove],
"onResponderRelease": [Function onResponderRelease],
"onResponderTerminate": [Function onResponderTerminate],
"onResponderTerminationRequest": [Function onResponderTerminationRequest],
"onScroll": [Function _onScroll],
"onSelectionChange": [Function _onSelectionChange],
"onSelectionChangeShouldSetResponder": [Function emptyFunctionThatReturnsTrue],
"onStartShouldSetResponder": [Function onStartShouldSetResponder],
"placeholder": "Your course goal!!",
"rejectResponderTermination": true,
"returnKeyType": undefined,
"selection": null,
"style": [Object],
"submitBehavior": "blurAndSubmit",
"text": "",
"textContentType": undefined,
"underlineColorAndroid": "transparent"
},
"ref": [Function forwardRef],
"return": {
"_debugHookTypes": null,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": undefined,
"actualDuration": 0.04571723937988281,
"actualStartTime": 829945578.690279,
"alternate": [FiberNode],
"child": [Circular],
"childLanes": 0,
"deletions": null,
"dependencies": null,
"elementType": [Object],
"flags": 0,
"index": 0,
"key": null,
"lanes": 0,
"memoizedProps": [Object],
"memoizedState": null,
"mode": 2,
"pendingProps": [Object],
"ref": null,
"return": [FiberNode],
"selfBaseDuration": 0.018931031227111816,
"sibling": null,
"stateNode": null,
"subtreeFlags": 516,
"tag": 10,
"treeBaseDuration": 0.032531142234802246,
"type": [Object],
"updateQueue": null
},
"selfBaseDuration": 0.01360011100769043,
"sibling": null,
"stateNode": {
"_children": [Array],
"_internalFiberInstanceHandleDEV": [Circular],
"_nativeTag": 3,
"clear": [Function clear],
"getNativeRef": [Function getNativeRef],
"isFocused": [Function isFocused],
"setSelection": [Function setSelection],
"viewConfig": [Object]
},
"subtreeFlags": 0,
"tag": 5,
"treeBaseDuration": 0.01360011100769043,
"type": "RCTSinglelineTextInputView",
"updateQueue": null
}, "_dispatchListeners": [Function _onChange], "_targetInst": {
"_debugHookTypes": null,
"_debugNeedsRemount": false,
"_debugOwner": {
"_debugHookTypes": [Array],
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": undefined,
"actualDuration": 0.3320891857147217,
"actualStartTime": 829945578.402573,
"alternate": [FiberNode],
"child": [FiberNode],
"childLanes": 0,
"deletions": null,
"dependencies": null,
"elementType": [Function InternalTextInput],
"flags": 8388613,
"index": 0,
"key": null,
"lanes": 0,
"memoizedProps": [Object],
"memoizedState": [Object],
"mode": 2,
"pendingProps": [Object],
"ref": null,
"return": [FiberNode],
"selfBaseDuration": 0.2843759059906006,
"sibling": null,
"stateNode": null,
"subtreeFlags": 516,
"tag": 0,
"treeBaseDuration": 0.31690704822540283,
"type": [Function InternalTextInput],
"updateQueue": [Object]
},
"_debugSource": undefined,
"actualDuration": 0.022422194480895996,
"actualStartTime": 829945578.710574,
"alternate": {
"_debugHookTypes": null,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": undefined,
"actualDuration": 0.021181941032409668,
"actualStartTime": 829945576.637425,
"alternate": [Circular],
"child": null,
"childLanes": 0,
"deletions": null,
"dependencies": null,
"elementType": "RCTSinglelineTextInputView",
"flags": 516,
"index": 0,
"key": null,
"lanes": 0,
"memoizedProps": [Object],
"memoizedState": null,
"mode": 2,
"pendingProps": [Object],
"ref": [Function forwardRef],
"return": [FiberNode],
"selfBaseDuration": 0.01284801959991455,
"sibling": null,
"stateNode": [ReactNativeFiberHostComponent],
"subtreeFlags": 0,
"tag": 5,
"treeBaseDuration": 0.01284801959991455,
"type": "RCTSinglelineTextInputView",
"updateQueue": null
},
"child": null,
"childLanes": 0,
"deletions": null,
"dependencies": null,
"elementType": "RCTSinglelineTextInputView",
"flags": 516,
"index": 0,
"key": null,
"lanes": 0,
"memoizedProps": {
"accessibilityState": [Object],
"accessible": true,
"allowFontScaling": true,
"autoComplete": undefined,
"caretHidden": undefined,
"dataDetectorTypes": undefined,
"editable": undefined,
"focusable": true,
"forwardedRef": null,
"keyboardType": undefined,
"mostRecentEventCount": 19,
"onBlur": [Function _onBlur],
"onChange": [Function _onChange],
"onChangeSync": null,
"onClick": [Function onClick],
"onContentSizeChange": undefined,
"onFocus": [Function _onFocus],
"onKeyPressSync": undefined,
"onResponderGrant": [Function onResponderGrant],
"onResponderMove": [Function onResponderMove],
"onResponderRelease": [Function onResponderRelease],
"onResponderTerminate": [Function onResponderTerminate],
"onResponderTerminationRequest": [Function onResponderTerminationRequest],
"onScroll": [Function _onScroll],
"onSelectionChange": [Function _onSelectionChange],
"onSelectionChangeShouldSetResponder": [Function emptyFunctionThatReturnsTrue],
"onStartShouldSetResponder": [Function onStartShouldSetResponder],
"placeholder": "Your course goal!!",
"rejectResponderTermination": true,
"returnKeyType": undefined,
"selection": null,
"style": [Object],
"submitBehavior": "blurAndSubmit",
"text": "",
"textContentType": undefined,
"underlineColorAndroid": "transparent"
},
"memoizedState": null,
"mode": 2,
"pendingProps": {
"accessibilityState": [Object],
"accessible": true,
"allowFontScaling": true,
"autoComplete": undefined,
"caretHidden": undefined,
"dataDetectorTypes": undefined,
"editable": undefined,
"focusable": true,
"forwardedRef": null,
"keyboardType": undefined,
"mostRecentEventCount": 19,
"onBlur": [Function _onBlur],
"onChange": [Function _onChange],
"onChangeSync": null,
"onClick": [Function onClick],
"onContentSizeChange": undefined,
"onFocus": [Function _onFocus],
"onKeyPressSync": undefined,
"onResponderGrant": [Function onResponderGrant],
"onResponderMove": [Function onResponderMove],
"onResponderRelease": [Function onResponderRelease],
"onResponderTerminate": [Function onResponderTerminate],
"onResponderTerminationRequest": [Function onResponderTerminationRequest],
"onScroll": [Function _onScroll],
"onSelectionChange": [Function _onSelectionChange],
"onSelectionChangeShouldSetResponder": [Function emptyFunctionThatReturnsTrue],
"onStartShouldSetResponder": [Function onStartShouldSetResponder],
"placeholder": "Your course goal!!",
"rejectResponderTermination": true,
"returnKeyType": undefined,
"selection": null,
"style": [Object],
"submitBehavior": "blurAndSubmit",
"text": "",
"textContentType": undefined,
"underlineColorAndroid": "transparent"
},
"ref": [Function forwardRef],
"return": {
"_debugHookTypes": null,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": undefined,
"actualDuration": 0.04571723937988281,
"actualStartTime": 829945578.690279,
"alternate": [FiberNode],
"child": [Circular],
"childLanes": 0,
"deletions": null,
"dependencies": null,
"elementType": [Object],
"flags": 0,
"index": 0,
"key": null,
"lanes": 0,
"memoizedProps": [Object],
"memoizedState": null,
"mode": 2,
"pendingProps": [Object],
"ref": null,
"return": [FiberNode],
"selfBaseDuration": 0.018931031227111816,
"sibling": null,
"stateNode": null,
"subtreeFlags": 516,
"tag": 10,
"treeBaseDuration": 0.032531142234802246,
"type": [Object],
"updateQueue": null
},
"selfBaseDuration": 0.01360011100769043,
"sibling": null,
"stateNode": {
"_children": [Array],
"_internalFiberInstanceHandleDEV": [Circular],
"_nativeTag": 3,
"clear": [Function clear],
"getNativeRef": [Function getNativeRef],
"isFocused": [Function isFocused],
"setSelection": [Function setSelection],
"viewConfig": [Object]
},
"subtreeFlags": 0,
"tag": 5,
"treeBaseDuration": 0.01360011100769043,
"type": "RCTSinglelineTextInputView",
"updateQueue": null
}, "bubbles": undefined, "cancelable": undefined, "currentTarget": {
"_children": [],
"_internalFiberInstanceHandleDEV": {
"_debugHookTypes": null,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": undefined,
"actualDuration": 0.022422194480895996,
"actualStartTime": 829945578.710574,
"alternate": [FiberNode],
"child": null,
"childLanes": 0,
"deletions": null,
"dependencies": null,
"elementType": "RCTSinglelineTextInputView",
"flags": 516,
"index": 0,
"key": null,
"lanes": 0,
"memoizedProps": [Object],
"memoizedState": null,
"mode": 2,
"pendingProps": [Object],
"ref": [Function forwardRef],
"return": [FiberNode],
"selfBaseDuration": 0.01360011100769043,
"sibling": null,
"stateNode": [Circular],
"subtreeFlags": 0,
"tag": 5,
"treeBaseDuration": 0.01360011100769043,
"type": "RCTSinglelineTextInputView",
"updateQueue": null
},
"_nativeTag": 3,
"clear": [Function clear],
"getNativeRef": [Function getNativeRef],
"isFocused": [Function isFocused],
"setSelection": [Function setSelection],
"viewConfig": {
"Commands": [Object],
"Constants": [Object],
"Manager": "SinglelineTextInputViewManager",
"NativeProps": [Object],
"baseModuleName": "RCTBaseTextInputView",
"bubblingEventTypes": [Object],
"directEventTypes": [Object],
"uiViewClassName": "RCTSinglelineTextInputView",
"validAttributes": [Object]
}
}, "defaultPrevented": undefined, "dispatchConfig": {
"phasedRegistrationNames": {
"bubbled": "onChange",
"captured": "onChangeCapture"
}
}, "eventPhase": undefined, "isDefaultPrevented": [Function functionThatReturnsFalse], "isPropagationStopped": [Function functionThatReturnsFalse], "isTrusted": undefined, "nativeEvent": {
"eventCount": 20,
"target": 3,
"text": "T"
}, "target": {
"_children": [],
"_internalFiberInstanceHandleDEV": {
"_debugHookTypes": null,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": undefined,
"actualDuration": 0.022422194480895996,
"actualStartTime": 829945578.710574,
"alternate": [FiberNode],
"child": null,
"childLanes": 0,
"deletions": null,
"dependencies": null,
"elementType": "RCTSinglelineTextInputView",
"flags": 516,
"index": 0,
"key": null,
"lanes": 0,
"memoizedProps": [Object],
"memoizedState": null,
"mode": 2,
"pendingProps": [Object],
"ref": [Function forwardRef],
"return": [FiberNode],
"selfBaseDuration": 0.01360011100769043,
"sibling": null,
"stateNode": [Circular],
"subtreeFlags": 0,
"tag": 5,
"treeBaseDuration": 0.01360011100769043,
"type": "RCTSinglelineTextInputView",
"updateQueue": null
},
"_nativeTag": 3,
"clear": [Function clear],
"getNativeRef": [Function getNativeRef],
"isFocused": [Function isFocused],
"setSelection": [Function setSelection],
"viewConfig": {
"Commands": [Object],
"Constants": [Object],
"Manager": "SinglelineTextInputViewManager",
"NativeProps": [Object],
"baseModuleName": "RCTBaseTextInputView",
"bubblingEventTypes": [Object],
"directEventTypes": [Object],
"uiViewClassName": "RCTSinglelineTextInputView",
"validAttributes": [Object]
}
}, "timeStamp": 1682788547472, "type": undefined
预期控制台输出:单击按钮后输入框中的文本
1条答案
按热度按时间dgiusagp1#
传递给onChange处理程序的参数是
Event
;你会希望使用onChangeText
,它会传递新的文本: