Блог

У меня есть родитель и его 2 дочерних компонента

Родительский код:

 import React from 'react'; import { Grid, CircularProgress } from '@mui/material'; import { useSelector } from 'react-redux';  import Angle from './Angle/Angle'; import CustomSnackbar from '../Snackbar/CustomSnackbar'; import useStyles from './styles';  const Angles = ({ setCurrentId }) =gt; { const angles = useSelector((state) =gt; state.angles); const [snackbarOpenProp, setSnackbarOpenProp] = React.useState(false); const classes = useStyles();  const handleSnackBarCloseAction = () =gt; {  setSnackbarOpenProp(false) }  const handleAddToCartAction = () =gt; {  console.log('click');  setSnackbarOpenProp(true) }    return (  !angles.length ? lt;CircularProgress /gt; : (  lt;Grid className={classes.container} container alignItems="stretch" spacing={3}gt;  {angles.map((angle) =gt; (  lt;Grid key={angle._id} item xs={12} sm={6} md={6}gt;  lt;Angle angle={angle} setCurrentId={setCurrentId} handleAddToCart={handleAddToCartAction}/gt;  lt;/Gridgt;  ))}  lt;CustomSnackbar openState={snackbarOpenProp} handleSnackBarCloseProp={handleSnackBarCloseAction}/gt;  lt;/Gridgt;  )  ); };  export default Angles;  

Код ребенка 1:

 import React from 'react'; import { Card, CardActions, CardContent, CardMedia, Button, Typography } from '@mui/material'; import Add from '@mui/icons-material/Add';  import { useDispatch } from 'react-redux';   import useStyles from './styles';  const Angle = ({ angle, setCurrentId,handleAddToCart }) =gt; {  const dispatch = useDispatch();  const classes = useStyles();   return (  lt;Card className={classes.card}gt;  lt;CardMedia className={classes.media} image={angle.image} /gt;  lt;div className={classes.overlay}gt;  lt;Typography variant="h6"gt;{angle.qualityName}lt;/Typographygt;  lt;Typography variant="body2"gt;{angle.colors}lt;/Typographygt;  lt;/divgt;  lt;div className={classes.overlay2}gt;  lt;Button onClick={handleAddToCart} style={{ color: 'white' }} size="small" onClick={() =gt; setCurrentId(angle._id)}gt;lt;Add fontSize="large" /gt;lt;/Buttongt;  lt;/divgt;  lt;/Cardgt;   ); };  export default Angle;  

Код ребенка 2:

 import * as React from 'react'; import Button from '@mui/material/Button'; import Snackbar from '@mui/material/Snackbar'; import IconButton from '@mui/material/IconButton'; import CloseIcon from '@mui/icons-material/Close';  export default function CustomSnackbar(props) {    const action = (  lt;React.Fragmentgt;  lt;Button color="secondary" size="small" onClick={props.handleSnackBarCloseProp}gt;  UNDO  lt;/Buttongt;  lt;IconButton  size="small"  aria-label="close"  color="inherit"  onClick={props.handleSnackBarCloseProp}  gt;  lt;CloseIcon fontSize="small" /gt;  lt;/IconButtongt;  lt;/React.Fragmentgt;  );   return (  lt;divgt;  lt;Snackbar  open={props.openState}  autoHideDuration={6000}  onClose={props.handleSnackBarCloseProp}  message="Note archived"  action={action}  /gt;  lt;/divgt;  ); }  

Как вы можете видеть, я пытаюсь прикрепить событием onclick, который находится в child1, так угол код, основанный на кнопку Я пытаюсь изменить значение состояния другого ребенка2 CustomSnackbar и отправить его в качестве опоры, но при нажатии, но я не получаю ответ, Как я могу сделать это, и есть ли более простой способ достичь этого ?

В компоненте кнопки есть два onClick метода. Пожалуйста, измените в соответствии с приведенным ниже примером и попробуйте.

До:

 lt;Button onClick={handleAddToCart} style={{ color: 'white' }} size="small" onClick={() =gt; setCurrentId(angle._id)}gt;lt;Add fontSize="large" /gt;lt;/Buttongt;  

После:

 lt;Button   style={{ color: 'white' }}   size="small"   onClick={() =gt; {   handleAddToCart();  setCurrentId(angle._id)  }  }gt;  lt;Add fontSize="large" /gt;  lt;/Buttongt;