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

Я знаю, что с помощью следующего кода ниже изменение useState в событии onPress другого компонента было бы невозможно, но как мне это сделать? Я хочу сделать так, чтобы при выполнении функции onPress внутри Card.js popUpData изнутри 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

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

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

Раскрытие чувствительных данных

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

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Зод: сила проверки и преобразования данных

Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Руководство ChatGPT по продаже мини JS-файлов

JS-файл - это файл, содержащий код JavaScript. JavaScript - это язык программирования, который в основном используется для добавления интерактивности...

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

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

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