Как вернуть данные из родительского компонента в дочерний?

Question

[andrey_chirkin]

Добрый день! У меня есть форма, в которой можно менять данные. При нажатии на кнопку Сохранить нужно, чтобы данные записывались в глобальный стейт, для этого я использую mobX. Но для этого данные нужно передать в родительский компонент. Не могу понять, как сделать callback, чтобы вернуть данные?

import React, {useState} from 'react'
import '../OperationTable.css'
import {
	Button,
	Dialog,
	DialogActions,
	DialogContent,
	DialogTitle,
	IconButton,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import InputText from "./InputText";
import InputCheckbox from "./InputCheckbox"
import EditIcon from '@mui/icons-material/Edit'
import TechStore from "../../../TechStore"

Родительский компонент, в который нужно вернуть данные:
const DialogWindow = (props) => {
	const item = props.item
	const index = props.index

	const [open, setOpen] = useState(false)
	// const [itemData, setItemData] = useState(item)

	const handleClickOpen = () => {
		setOpen(true)
	}

	const handleClose = () => {
		setOpen(false)
	}

	const BootstrapDialogTitle = (props) => {
		const {children, onClose, ...other} = props;

		return (
			<DialogTitle sx={{m: 0, p: 2}} {...other}>
				{children}
				{onClose ? (
					<IconButton
						aria-label="close"
						onClick={onClose}
						sx={{
							position: 'absolute',
							right: 8,
							top: 8,
							color: (theme) => theme.palette.grey[500],
						}}
					>
						<CloseIcon/>
					</IconButton>
				) : null}
			</DialogTitle>
		)
	}

	return (
		<>
			<Button
				variant="text"
				onClick={handleClickOpen}
			>
				<EditIcon/>
			</Button>
			<Dialog
				open={open}
				onClose={handleClose}
			>
				<BootstrapDialogTitle id="customized-dialog-title" onClose={handleClose}>
					Изменить данные
				</BootstrapDialogTitle>
				<DialogContent dividers>
					<div className="textFields">
						<div className="textField">
							<InputText
								label="Номер операции"
								index={index}
								name="numberOperation"
								item={item}
								// handleSubmit={handleSubmit}
							/>
						</div>
						<div className="textField">
							<InputText
								label="Наименование операции"
								index={index}
								name="nameOperation"
								item={item}
							/>
						</div>
						<div className="textField">
							<InputText
								label="Уровень"
								index={index}
								name="level"
								item={item}
							/>
						</div>
						<div className="textField">
							<InputText
								label="Цех"
								index={index}
								name="workshop"
								item={item}
							/>
						</div>
						<div className="textField">
							<InputText
								label="Участок"
								index={index}
								name="area"
								item={item}
							/>
						</div>
						<div className="textField">
							<InputText
								label="Тшт"
								index={index}
								name="tsht"
								item={item}
							/>
						</div>
						<div className="textField">
							<InputText
								label="Тпз"
								index={index}
								name="tpz"
								item={item}
							/>
						</div>
						<div className="textField">
							<InputText
								label="Тест"
								index={index}
								name="test"
								item={item}
							/>
						</div>
					</div>
					<div className="inputCheckboxs">
						<InputCheckbox label="ОО"/>
						<InputCheckbox label="ОТК"/>
						<InputCheckbox label="ПЗ"/>
						<InputCheckbox label="КПС"/>
					</div>
				</DialogContent>
				<DialogActions>
					<Button
						onClick={handleClose}
						variant="contained"
						color="success"
						// onSubmit={() => handleSubmit(index, item)}
					>
						Сохранить
					</Button>
				</DialogActions>
			</Dialog>
		</>
	)
}

export default DialogWindow

Дочерний компонент, где можно изменять данные формы и откуда их нужно вернуть:

import React, {useEffect, useState} from 'react'
import {TextField} from "@mui/material"
import {observer} from "mobx-react"

const InputText = observer(({label, index, name, item, handleSubmit}) => {

	const [strData, setStrData] = useState(item)

	// handleSubmit(index, strData)

	return (
		<TextField
			id="outlined-basic"
			label={label}
			variant="outlined"
			sx={{width: '95%'}}
			value={strData[name]}
			onChange={(event) => setStrData({...item, [name]: event.target.value})}
		/>
	)
})

export default InputText

Answer 1

[ParaBellum577]

Вам нужно вынести состояние из инпута в родительский компонент и передать в InputText пропсами value и onChange функцию и тогда данные формы уже будут там где вам нужно

Comments

[andrey_chirkin]

Спасибо!