英文:
React Native: How do I generate a box after user input with the text from user input?
问题
我怎样在用户输入后生成一个包含用户输入文本（已选择、数量、度量、日、月、年）的框？
我也希望在导航栈的另一页显示和生成此框，但我假设我可以使用 "props" 关键字并在其他页面初始化此功能（AddFood）来实现这一点？
这是整个函数的代码（不过重要部分如下）：
// 手动添加食物
const AddFood = (props) => {
// 下拉菜单常量
const [selected, setSelected] = React.useState("");
// 数量常量
const [quantity, setQuantity] = React.useState("");
const [metric, setMetric] = React.useState("");
// 日期常量
const [day, setDay] = React.useState("");
const [month, setMonth] = React.useState("");
const [year, setYear] = React.useState("");
// 下拉菜单数据
const data = [
{ key: 'Test1', value: 'Test1' },
{ key: 'Test2', value: 'Test2' },
{ key: 'Test3', value: 'Test3' },
]
const metricData = [
{ key: 'ml', value: 'ml' },
{ key: 'g', value: 'g' },
{ key: 'litres', value: 'litres' },
]
const dayData = [
{ key: '1', value: '01' },
]
const monthData = [
{ key: '1', value: '01' },
]
const yearData = [
{ key: '2023', value: '2023' },
]
const onPressBack = () => {
props.navigation.navigate('BarcodeOrManual');
}
// 验证并将数据传递到数据库
const showAlert = () => {
if (selected && quantity && metric && day && month && year) {
Alert.alert(
"食物成功输入"
);
// 在这里传递数据
} else {
Alert.alert(
"请填写所有字段"
);
}
}
return (
<View style={{ paddingHorizontal: 20, paddingVertical: 50, flex: 1 }}>
{/* 食物下拉菜单 */}
<SelectList
data={data}
// onSelect={() => alert(selected)}
// setSelected={setSelected}
setSelected={(val) => setSelected(val)}
dropdownItemStyles={{ marginHorizontal: 10 }}
dropdownTextStyles={{ color: 'black' }}
searchPlaceholder="输入项目"
placeholder="输入项目"
maxHeight={100}
/>
{/* 食物数量 */}
<Text>数量</Text>
<View style={{ flexDirection: "row" }}>
<TextInput
style={styles.input}
onChangeText={setQuantity}
value={quantity}
keyboardType="numeric"
/>
<SelectList
data={metricData}
// onSelect={() => alert(selected)}
// setSelected={setSelected}
setSelected={(val) => setMetric(val)}
dropdownItemStyles={{ marginHorizontal: 10 }}
dropdownTextStyles={{ color: 'black' }}
searchPlaceholder="(ml, g, 等)"
placeholder="输入度量"
maxHeight={100}
/>
</View>
{/* 日期 */}
<Text>使用日期</Text>
<View style={{ flexDirection: "row" }}>
<SelectList
data={dayData}
// onSelect={() => alert(selected)}
// setSelected={setSelected}
setSelected={(val) => setDay(val)}
dropdownItemStyles={{ marginHorizontal: 10 }}
dropdownTextStyles={{ color: 'black' }}
placeholder=" "
maxHeight={100}
/>
<Text>DD /</Text>
<SelectList
data={monthData}
// onSelect={() => alert(selected)}
// setSelected={setSelected}
setSelected={(val) => setMonth(val)}
dropdownItemStyles={{ marginHorizontal: 10 }}
dropdownTextStyles={{ color: 'black' }}
placeholder=" "
maxHeight={100}
/>
<Text>MM /</Text>
<SelectList
data={yearData}
// onSelect={() => alert(selected)}
// setSelected={setSelected}
setSelected={(val) => setYear(val)}
dropdownItemStyles={{ marginHorizontal: 10 }}
dropdownTextStyles={{ color: 'black' }}
placeholder=" "
maxHeight={100}
/>
<Text>YYYY /</Text>
</View>
<Pressable onPress={showAlert} style={styles.button}>
<Text style={{ fontSize: 15, color: 'white' }}>添加项目</Text>
</Pressable>
<Pressable onPress={onPressBack} style={styles.button}>
<Text style={{ fontSize: 15, color: 'white' }}>返回</Text>
</Pressable>
</View>
)
}
下面的变量是要显示的数据存储的地方：
// 下拉菜单常量
const [selected, setSelected] = React.useState("");
// 数量常量
const [quantity, setQuantity] = React.useState("");
const [metric, setMetric] = React.useState("");
// 日期常量
const [day, setDay] = React.useState("");
const [month, setMonth] = React.useState("");
const [year, setYear] = React.useState("");
当用户按下按钮时运行的代码如下：
// 验证并将数据传递到数据库
const showAlert = () => {
if (selected && quantity && metric && day && month && year) {
Alert.alert(
"食物成功输入"
);
// 在这里传递数据
} else {
Alert.alert(
"请填写所有字段"
);
}
}
谢谢！
英文:
How do I generate a box after user input with the text from user input (selected, quantity, metric, day, month, year)?
I was also hoping to display and generate this box on another page in the Navigation stack but I am assuming I can do this by using the "props" keyword and initialising this function (AddFood) in the other page?
This is my code for the whole function (however the important parts are below):
// MANUALLY ADD FOOD
const AddFood = (props) => {
// DROPDOWN MENU CONST
const [selected, setSelected] = React.useState("");
// QUANTITY CONST
const [quantity, setQuantity] = React.useState("");
const [metric, setMetric] = React.useState("");
// DATE CONST
const [day, setDay] = React.useState("");
const [month, setMonth] = React.useState("");
const [year, setYear] = React.useState("");
// DROPDOWN MENU DATA
const data = [
{key:'Test1',value:'Test1'},
{key:'Test2',value:'Test2'},
{key:'Test3',value:'Test3'},
]
const metricData = [
{key:'ml',value:'ml'},
{key:'g',value:'g'},
{key:'litres',value:'litres'},
]
const dayData = [
{key:'1',value:'01'},
]
const monthData = [
{key:'1',value:'01'},
]
const yearData = [
{key:'2023',value:'2023'},
]
const onPressBack = () => {
props.navigation.navigate('BarcodeOrManual');
}
// VALIDATION AND PASS DATA TO DATABASE
const showAlert = () => {
if (selected && quantity && metric && day && month && year) {
Alert.alert (
"Food entered successfully"
);
// Pass data here
} else {
Alert.alert (
"Please fill in all the fields"
);
}
}
return (
<View style={{ paddingHorizontal: 20, paddingVertical: 50, flex: 1 }}>
{/* DROPDOWN MENU FOR FOOD */}
<SelectList
data={data}
// onSelect={() => alert(selected)}
// setSelected={setSelected}
setSelected={(val) => setSelected(val)}
dropdownItemStyles={{marginHorizontal:10}}
dropdownTextStyles={{color:'black'}}
searchPlaceholder="Enter item"
placeholder="Enter item"
maxHeight={100}
/>
{/* FOOD QUANTITY */}
<Text>Quantity</Text>
<View style={{ flexDirection: "row" }}>
<TextInput
style={styles.input}
onChangeText={setQuantity}
value={quantity}
keyboardType="numeric"
/>
<SelectList
data={metricData}
// onSelect={() => alert(selected)}
// setSelected={setSelected}
setSelected={(val) => setMetric(val)}
dropdownItemStyles={{ marginHorizontal:10 }}
dropdownTextStyles={{ color:'black' }}
searchPlaceholder="(ml, g, etc.)"
placeholder="Enter metric"
maxHeight={100}
/>
</View>
{/* DATE */}
<Text>Use by date</Text>
<View style={{ flexDirection: "row" }}>
<SelectList
data={dayData}
// onSelect={() => alert(selected)}
// setSelected={setSelected}
setSelected={(val) => setDay(val)}
dropdownItemStyles={{marginHorizontal:10}}
dropdownTextStyles={{color:'black'}}
placeholder=" "
maxHeight={100}
/>
<Text>DD /</Text>
<SelectList
data={monthData}
// onSelect={() => alert(selected)}
// setSelected={setSelected}
setSelected={(val) => setMonth(val)}
dropdownItemStyles={{marginHorizontal:10}}
dropdownTextStyles={{color:'black'}}
placeholder=" "
maxHeight={100}
/>
<Text>MM /</Text>
<SelectList
data={yearData}
// onSelect={() => alert(selected)}
// setSelected={setSelected}
setSelected={(val) => setYear(val)}
dropdownItemStyles={{marginHorizontal:10}}
dropdownTextStyles={{color:'black'}}
placeholder=" "
maxHeight={100}
/>
<Text>YYYY /</Text>
</View>
<Pressable onPress={showAlert} style={styles.button}>
<Text style={{ fontSize: 15, color: 'white' }}>Add Item</Text>
</Pressable>
<Pressable onPress={onPressBack} style={styles.button}>
<Text style={{ fontSize: 15, color: 'white' }}>BACK</Text>
</Pressable>
</View>
)
// VARIABLE STORES:
// selected -> Food dropdown menu selection
// quantity -> Quantity of food
// metric -> The relevant metric for the quantity of food
// day, month, year -> Use by date
}
The variables below is where the data I want to display is stored:
// DROPDOWN MENU CONST
const [selected, setSelected] = React.useState("");
// QUANTITY CONST
const [quantity, setQuantity] = React.useState("");
const [metric, setMetric] = React.useState("");
// DATE CONST
const [day, setDay] = React.useState("");
const [month, setMonth] = React.useState("");
const [year, setYear] = React.useState("");
This is the code that is run when the button is pressed by the user:
// VALIDATION AND PASS DATA TO DATABASE
const showAlert = () => {
if (selected && quantity && metric && day && month && year) {
Alert.alert (
"Food entered successfully"
);
// Pass data here
} else {
Alert.alert (
"Please fill in all the fields"
);
}
}
Thank you!
答案1
得分: 2
如果你正在使用React Navigation，当你导航到其他页面时，你可以将这些变量作为参数传递。
const { navigate } = useNavigation();
navigate('otherScreen', { quantity, metric, day, month, year });
在你的其他页面中：
const { params } = useRoute();
console.log(params);
查看 https://reactnavigation.org/docs/params/
英文:
If you're using React Navigation, you can pass these variables as params when you navigate to the other page.
const { navigate } = useNavigation();
navigate('otherScreen', { quantity, metric, day, month, year });
and in your other screen
const { params } = useRoute();
console.log(params);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论