This is my InputItems.js
import React, { useState } from "react";
import { Text, View, StyleSheet, TextInput, Button } from "react-native-web";
function InputItems(props) {
const [inputGoal, setinputGoal] = useState("");
return (
<View style={style.wholeInputcontainer}>
<TextInput
placeholder="Enter the Text"
style={style.textInput}
onChangeText={(enteredtext) => {
setinputGoal(enteredtext);
}}
value={inputGoal}
/>
<Button title="Submit" onPress={props.onpressprop.bind(this,inputGoal)} />
</View>
);
}
const style = StyleSheet.create({
wholeInputcontainer: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
textInput: {
borderBottomColor: "blue",
borderBottomWidth: 4,
marginBottom: 10,
width: 300,
},
});
export default InputItems;
and this is my App.js
import React, { useState } from "react";
import { StatusBar } from "expo-status-bar";
import {
StyleSheet,
Text,
View,
TextInput,
Button,
ScrollView,
FlatList,
} from "react-native";
import Listitems from "./Components/ListItems";
import InputItems from "./Components/InputItems";
// import { Button, TextInput } from 'react-native-web';
export default function App() {
const [outputGoal, setoutputGoal] = useState([]);
const Onpress = (InputGoalProp) => {
setoutputGoal((Currentgoal) => [...Currentgoal, InputGoalProp]);
};
return (
<View style={style.root}>
<InputItems onpressprop={Onpress} />
{/* We can use mapping from outputGoal but using FlatList instead of ScrollView is more efficient */}
<FlatList
data={outputGoal}
renderItem={(listitems) => <Listitems anything={listitems.item} />}
/>
<StatusBar style="auto" />
</View>
);
}
const style = StyleSheet.create({
//StyleSheet is a class of react-native, we can always use inline styleing
root: {
marginTop: 100,
},
});
陷入这个问题。请帮助我,如果你可以。这是错误...
不变违背:组件input
的视图配置getter回调必须是一个函数(已接收undefined
)。请确保组件名称以大写字母开头。
此错误位于:在输入中(由TextInput创建)在TextInput中(由InputItems创建)
2条答案
按热度按时间wvyml7n51#
您在此行中有一处打印错误:
第一个月
在
this
后面有一个逗号而不是句号。它应该是<Button title="Submit" onPress={props.onpressprop.bind(this.inputGoal)} />
zzoitvuj2#
在
InputItems.js
中,您仍然有错误的导入(看起来您已经在App.js
中更正了它):更改此内容:
import { Text, View, StyleSheet, TextInput, Button } from "react-native-web";
至:
import { Text, View, StyleSheet, TextInput, Button } from "react-native";