Как передать данные в родительский компонент react-native?
Как передать данные в родительский компонент react-native?
2 ответа
@lilla.herman
Для передачи данных из дочернего компонента в родительский компонент в React Native можно использовать функцию-callback, которая передается в качестве props в дочерний компонент. В дочернем компоненте эта функция вызывается с необходимыми данными в качестве аргументов, а родительский компонент может использовать эти данные.
@lilla.herman
Пример реализации:
Родительский компонент:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const [receivedData, setReceivedData] = useState('');
const handleDataReceived = (data) => {
// Обработка полученных данных
setReceivedData(data);
};
return (
<View>
<ChildComponent onDataReceived={handleDataReceived} />
<Text>Полученные данные: {receivedData}</Text>
</View>
);
};
export default ParentComponent;
|
Дочерний компонент:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
const ChildComponent = ({ onDataReceived }) => {
const [inputData, setInputData] = useState('');
const sendDataToParent = () => {
// Отправка данных в родительский компонент
onDataReceived(inputData);
};
return (
<View>
<TextInput
placeholder="Введите данные"
value={inputData}
onChangeText={setInputData}
/>
<Button title="Отправить" onPress={sendDataToParent} />
</View>
);
};
export default ChildComponent;
|
В данном примере родительский компонент ParentComponent содержит дочерний компонент ChildComponent. В дочернем компоненте определен атрибут onDataReceived, который представляет функцию-callback для передачи данных в родительский компонент. При вводе данных и нажатии на кнопку в дочернем компоненте вызывается функция sendDataToParent, которая передает введенные данные в родительский компонент с помощью функции-callback onDataReceived. Родительский компонент обрабатывает полученные данные в функции handleDataReceived и сохраняет их в состоянии receivedData, которое затем отображается в текстовом компоненте.