Answer the question
In order to leave comments, you need to log in
How to return data from parent component to child?
Good afternoon! I have a form that can change data. When you click on the Save button, you need the data to be written to the global state, for this I use mobX. But for this, the data must be passed to the parent component. I can't figure out how to make a callback to return data?
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 the question
In order to leave comments, you need to log in
You need to move the state from the input to the parent component and pass the value and onChange function to the InputText props and then the form data will already be where you need
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question