Javascript React Native-从子函数调用父ref函数
我有一个Javascript React Native-从子函数调用父ref函数,javascript,reactjs,react-native,ecmascript-6,Javascript,Reactjs,React Native,Ecmascript 6,我有一个Parent组件: import React, { Component } from "react"; import { View, TextInput } from "react-native"; class Parent extends Component { constructor(props) { super(props); this.state = { txt: "" }; } render() { return (
Parent
组件:
import React, { Component } from "react";
import { View, TextInput } from "react-native";
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
txt: ""
};
}
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<TextInput
ref={parentInput => {
this.parentInput = parentInput;
}}
style={{
width: 200,
height: 100
}}
onChangeText={txt => this.setState({ txt })}
value={this.state.txt}
/>
</View>
);
}
}
export default Parent;
import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
class Child extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<TouchableOpacity
style={{
justifyContent: "center",
alignItems: "center",
width: 200,
height: 100
}}
onPress={() => {
// ???
}}
>
<Text>Clear Input!</Text>
</TouchableOpacity>
</View>
);
}
}
export default Child;
我知道我可以使用this.parentInput.clear()
清除parent
中的父输入,但是如何从子组件中清除
提前谢谢
对于像这样最简单的用例,您可以使用回调函数并将其作为prop
传递
比如说,,
子项
:
<TouchableOpacity
style={{
justifyContent: "center",
alignItems: "center",
width: 200,
height: 100
}}
onPress={() => {
this.props.onClick(); // <-- you might want to pass some args as well
}}
>
但是,对于高级用例,我建议使用任何状态管理库,如。对于这样最简单的用例,您可以使用回调函数并将其作为属性传递
比如说,,
子项
:
<TouchableOpacity
style={{
justifyContent: "center",
alignItems: "center",
width: 200,
height: 100
}}
onPress={() => {
this.props.onClick(); // <-- you might want to pass some args as well
}}
>
然而,对于高级用例,我建议使用任何状态管理库,如