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

Question

У меня есть дочерний компонент, и я хочу сделать несколько вещей из одной опоры. Основная идея - это дочерний компонент, у меня есть элемент, который я хочу передать родительскому, и в то же время я хочу закрыть модальное состояние изменения от родителя ".

выстрел

Так как же мне с этим справиться?

Const Child =(props) => {
        const [itemSelected,setItemSelected] = useState(null);
    
    const passData= ()=>{
        ....
        // I want here to send item selected and call a function from parent 
       // props.onPress( itemSelected, and let parent to call a function )
     }

   return (
      <Button onPress={passData} />
}


Const Parent = ()=>{
     Const sendData = ()=>{
         // Change parent state "close modal"
         // get data from child and send it to Api 
      }

     return (
       <Child onPress={sendData} />
     );
}

Answer 1

Идеальный способ передать данные из Child в Parent в React через функции, переданные как props. Я думаю, что одна из основных причин, почему это вас смутило, - это название функции, которую вы использовали. Для простоты понимания я переименовал переданный prop как onPress в sendData. Посмотрим, упростит ли это дело. Итак, вот ваши компоненты:

ДЕТСКИЙ

Const Child =(props) => {
   const [itemSelected,setItemSelected] = useState(null);
   const passData = () => {
        ....
        props.sendData(itemSelected);
        // calling the function (sendData) received from Parent as a prop
        // with the data (itemSelected) from Child
   }

   return (
      <Button onPress={passData} />
   )
}

РОДИТЕЛЬ

const Parent = () => {
     const sendData = (itemSelected) => {
        // itemSelected is the data which you are receiving from Child
        // this function will be called from Child with the data passed as parameter
     }

     return (
        <Child sendData={sendData} />
        // sending the function to child
     )
}

Answer 2

Если вы хотите обновить родительский элемент из дочернего, вы можете сделать что-то вроде этого:

const Child = ({update}) => {
    
    update("foo", "bar");
    
    return (
        <Text> Test </Text>
    )  
}
const Parent = () => {
     const [foo, setFoo] = useState('');
     const [bar, setBar] = useState('');

     const update = (f, b) => {
        setFoo(f);
        setBar(b);
     }
 
     return (
       <>
         <Child update/>
       </>
     }

}