将输入状态从父组件传递到子组件 [英] Passing input state from parent to child component
问题描述
我想将值和 setValue 传递给 Right 组件.我做了一些事情,但它不起作用.我正在输入,但它正在立即删除.我什至看不到我在 textinput 中输入的内容.这样做的正确方法是什么?
I want to pass the value and setValue to Right component . I've done something but it's not working.I am typing but it's deleting immediately.I can't see even what I am typing to textinput.What is the proper way to do this ?
export const Vault = ({ navigation }: VaultStackNavigationProps<"Vault">) => {
const [value, setValue] = useState("");
React.useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (
<Right
setText={setValue}
value={value}
/>
),
});
}, [navigation]);
return (
//component style
);
};
const Right = ({ value, setText }) => {
const [focus, setFocus] = useState(false);
const { width } = useWindowDimensions();
const onSearch = () => {
setFocus(true);
};
const onClose = () => {
setFocus(false);
};
return (
<>
<Animated.Viewstyle={{flexDirection: "row",justifyContent: "center",alignItems: "center",width:width - 40,
}}
>
{focus && (
<TextInput
value={value}
onChangeText={(text) => setText(text)}
placeholder="Type here"
/>
)}
{value.length > 0 && (
<TouchableOpacity style={{ width: width / 9 }} onPress={onClear}>
<AntDesign name="close" size={24} color="white" />
</TouchableOpacity>
)}
</Animated.View>
{!focus && (
<TouchableOpacity onPress={onSearch} style={{ width: width / 9 }}>
<AntDesign name="search1" size={24} color="#64646E" />
</TouchableOpacity>
)}
</>
);
};
推荐答案
如果不添加更多内容,您的示例代码将无法运行.如需将来参考,请参阅如何制作最小的、可重现的示例.
Your example code cannot be run without adding more onto it. For future reference, see how to make a minimum, reproducible example.
无论如何,这是一个将状态值和setter方法传递给子组件的示例,我已经测试过:
Anyways, here is an example of passing in the state value and setter method to a child component, which I have tested:
TestComponent.js:
TestComponent.js:
import React, {useState} from "react";
import {TextInput, View, Text, SafeAreaView, StyleSheet} from "react-native";
const TestComponent = props => {
const [value, setValue] = useState("");
return (
<SafeAreaView style={styles.safeAreaView}>
<View style={styles.parent}>
<ChildComponent value={value} setValue={setValue}/>
</View>
</SafeAreaView>
);
};
const ChildComponent = props => {
const textChangeHandler = (text) => {
props.setValue(text);
};
return (
<View style={styles.child}>
<Text>Input Some Text:</Text>
<TextInput
style={styles.input}
value={props.value}
onChangeText={textChangeHandler}
/>
</View>
);
};
const styles = StyleSheet.create({
safeAreaView: {
flex: 1,
},
parent: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
child: {
flexDirection: "row",
marginHorizontal: 25,
justifyContent: "center",
alignItems: "center",
},
input:{
flex: 1,
marginHorizontal: 10,
borderWidth: 1,
borderColor: "black",
}
});
export default TestComponent;
这是 App.js 文件:
And here is the App.js file:
import React from 'react';
import {StyleSheet, SafeAreaView} from 'react-native';
import TestComponent from "./TestComponent";
export default function App() {
return (
<SafeAreaView style={styles.safeAreaView}>
<TestComponent />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
safeAreaView: {
flex: 1,
}
});
这篇关于将输入状态从父组件传递到子组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!