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
  }}
>

然而,对于高级用例,我建议使用任何状态管理库,如