Вызов функции из интерфейса материала

Question

Я хочу передать функцию в качестве свойства моей материальной функции пользовательского интерфейса. Данная функция не определена в моем материальном интерфейсе. *

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Dialog from '@material-ui/core/Dialog';
import MuiDialogTitle from '@material-ui/core/DialogTitle';
import MuiDialogContent from '@material-ui/core/DialogContent';
import MuiDialogActions from '@material-ui/core/DialogActions';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Typography from '@material-ui/core/Typography';
import Slider from '@material-ui/core/Slider';
import { useTranslation } from 'react-i18next';
import measureLogo from '../../assets/images/measure.png';
import { Button } from '../../components';

const styles = (theme) => ({
  root: {
    margin: 0,
    padding: theme.spacing(2),
  },
  closeButton: {
    position: 'absolute',
    right: theme.spacing(1),
    top: theme.spacing(1),
    color: theme.palette.grey[500],
  }
});

const DialogTitle = withStyles(styles)((props) => {
  const {
    children, classes, onClose, ...other
  } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant="h6">{children}</Typography>
      {onClose ? (
        <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
});

const DialogContent = withStyles((theme) => ({
  root: {
    padding: theme.spacing(2)
  }
}))(MuiDialogContent);

const DialogActions = withStyles((theme) => ({
  root: {
    margin: 0,
    padding: theme.spacing(1)
  }
}))(MuiDialogActions);


export default function CustomizedDialogs(props) {
  const [open, setOpen] = React.useState(false);
  // eslint-disable-next-line no-unused-vars
  const [height, setHeight] = React.useState(0);
  // eslint-disable-next-line no-unused-vars
  const [width, setWidth] = React.useState(0);


  console.log("ici = " + props.myFunction)
  const setSizeHeight = () => (e, value) => {
    setHeight(value);
  };


  const setSizeWidth = () => (e, value) => {
    setWidth(value);
  };

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

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

  const { t } = useTranslation();

  return (
    <div className="marginCardComponent">
      <Button
        onClick={handleClickOpen}
        text="dashboard.createGardenBtn"
        type="submit"
      />
      <Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={open}>
        <DialogTitle id="customized-dialog-title" className="centerText" onClose={handleClose}>
          {t('dashboard.createGardenTitle')}
        </DialogTitle>
        <DialogContent className="logoMeasureParent">
          <img src={measureLogo} alt="Logo" className="logoMeasure centerText" />
        </DialogContent>
        <DialogContent dividers>
          <Typography className="centerText" gutterBottom>
            { t('dashboard.createGardenDetail') }
          </Typography>
        </DialogContent>
        <div className="marginLeft3">
          <p>{ t('dashboard.height') }</p>
        </div>
        <div className="centerSlider">
          <Slider
              /* eslint-disable-next-line react/destructuring-assignment */
            defaultValue={0}
            aria-labelledby="discrete-slider"
            valueLabelDisplay="auto"
            step={1}
            marks
            min={1}
            max={20}
            onChange={setSizeHeight()}
          />
        </div>
        <div className="marginLeft3">
          <p>{ t('dashboard.width') }</p>
        </div>
        <div className="centerSlider">
          <Slider
              /* eslint-disable-next-line react/destructuring-assignment */
            defaultValue={0}
            aria-labelledby="discrete-slider"
            valueLabelDisplay="auto"
            step={1}
            marks
            min={1}
            max={20}
            onChange={setSizeWidth()}
          />
        </div>
        <DialogActions>
          <Button
            onClick={handleClose}
            text="dashboard.cancelBtn"
            type="submit"
          />
          <Button
            onClick={props.myFunction}
            text="dashboard.createGardenBtn"
            type="submit"
          />
        </DialogActions>
      </Dialog>
    </div>
  );
}

Когда я нажимаю на кнопку, он ничего не делает, а когда я печатаю myFunction, он сообщает мне undefined.

Почему я не могу указать реквизит для функции и вызвать myFunction?

Спасибо за вашу помощь.

Answer 1

Вам нужно вызвать его вне onClick. Сделайте это так:

const handleClick = (e) => {
   e.preventDefault()
   props.myFunction()
}

И в кнопке:

<Button
    onClick={handleClick}
    text="dashboard.createGardenBtn"
    type="submit"
 />

Это будет работать. Это просто не позволяет вам вызывать его внутри onClick

Вы также можете просто сделать это:

<Button
    onClick={() => props.myFunction()}
    text="dashboard.createGardenBtn"
    type="submit"
 />