Изменить useState из удаленного компонента

Я знаю, что с помощью следующего кода ниже изменение useState в событии onPress другого компонента было бы невозможно, но как мне это сделать? Я хочу сделать так, чтобы при выполнении функции onPress внутри Card.jspopUpData изнутри App.js менялась.

App.js

const [popUpData, setPopUpData] = React.useState("Nothing")

return (
   <Card>
     <Text style = {styles.pokemonName}>{item.name}</Text>
   </Card>

   <Text>{popUpData}</Text>
)

Card.js

const doSomething = () => {
   setPopUpData("Something")

   //other things...
}

return (
   <TouchableOpacity activeOpacity = {1} style = {styles.card} onPress = {doSomething()}>
       <View style = {styles.cardContent}>
           { props.children }
       </View>
   </TouchableOpacity>
)

javascript react-native use-state

20.12.2020 19:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

102

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Просто передайте ссылку на функцию setState дочернему компоненту. (в простейшем случае)

const Parent = () => {
   const [popUpData, setPopUpData] = React.useState("Nothing")

   return (
      <Card setPopUpDataHandler = {setPopUpData}>
        <Text style = {styles.pokemonName}>{item.name}</Text>
       </Card>

       <Text>{popUpData}</Text>
   )
}

const Card = ({setPopUpDataHandler, children}) => {
   const doSomething = () => {
      setPopUpDataHandler("Something")

      //other things...
   }

   return (
       <TouchableOpacity activeOpacity = {1} style = {styles.card} onPress = {doSomething()}>
          <View style = {styles.cardContent}>
              { children }
          </View>
      </TouchableOpacity>
   )
}

20.12.2020 19:37

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

App.js

const [popUpData, setPopUpData] = React.useState("Nothing")

return (
   <Card onUpdate = {(d)=>setPopUpData(d) }>
     <Text style = {styles.pokemonName}>{item.name}</Text>
   </Card>

   <Text>{popUpData}</Text>
)

Card.js

function Card(props){
 const doSomething = () => {
   props.onUpdate("Something")
 
 }

return (
   <TouchableOpacity activeOpacity = {1} style = {styles.card} onPress = {doSomething()}>
       <View style = {styles.cardContent}>
           { props.children }
       </View>
   </TouchableOpacity>
)
}

20.12.2020 19:37

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

Реагировать навигатор 5; Навигатор вкладок и навигатор стека

Как преобразовать компонент класса в компонент функции

Как я могу изменить определенную строку массива объектов с помощью TextInput в родном реагировании с помощью хука реакции?

Console.info в журнале массива useState Hook несколько раз после запроса GET с помощью Axios

Как получить значение из локального хранилища с помощью asyncStorage и вернуть его

React Native, NodeJS, Socket.io

Сохранение центра изображения после изменения высоты

Как отобразить функцию карты из выборки REACT.js

Что возвращает firebase fetchSignInMethodsForEmail?

React Native fetch из MongoDB не работает

Изменить useState из удаленного компонента

Ответы 2

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

Похожие вопросы