React Native - вызов функции родительской ссылки из дочернего элемента

У меня есть компонент 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;

И у меня есть компонент Child:

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;

Я знаю, что могу очистить родительский ввод в Parent с помощью this.parentInput.clear(), но как я могу очистить это из компонента Child?

Thanks in advance!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
522
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В наиболее простом варианте использования, подобном этому, вы можете обойтись, используя функцию обратного вызова и передав ее как prop.

Например, Child:

<TouchableOpacity
  style = {{
    justifyContent: "center",
    alignItems: "center",
    width: 200,
    height: 100
  }}
  onPress = {() => {
    this.props.onClick(); // <-- you might want to pass some args as well
  }}
>

А из Parent, когда вы используете child, передайте опору onClick как функцию:

<Child onClick = {() => { 
    console.info('onclick of parent called!');
    this.parentInput.clear(); 
    // Add something more here 
}}>

Однако для расширенного использования я рекомендую использовать любые библиотеки управления состоянием, такие как Redux.

Другие вопросы по теме