A
A
andrey_chirkin2022-02-23 12:39:05
JavaScript
andrey_chirkin, 2022-02-23 12:39:05

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


A child component where you can change the form data and from where it needs to be returned:

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

1 answer(s)
P
ParaBellum577, 2022-02-23
@andrey_chirkin

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 question

Ask a Question

731 491 924 answers to any question