如何在反應中從孩子執行父操作

我有父組件及其 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 }) => {
const angles = useSelector((state) => state.angles);
const [snackbarOpenProp, setSnackbarOpenProp] = React.useState(false);
const classes = useStyles();

const handleSnackBarCloseAction = () => {
  setSnackbarOpenProp(false)
}

const handleAddToCartAction = () => {
  console.log('click');
  setSnackbarOpenProp(true)
}


  return (
    !angles.length ? <CircularProgress /> : (
      <Grid className={classes.container} container alignItems="stretch" spacing={3}>
        {angles.map((angle) => (
          <Grid key={angle._id} item xs={12} sm={6} md={6}>
            <Angle angle={angle} setCurrentId={setCurrentId} handleAddToCart={handleAddToCartAction}/>
          </Grid>
        ))}
        <CustomSnackbar openState={snackbarOpenProp} handleSnackBarCloseProp={handleSnackBarCloseAction}/>
      </Grid>
    )
  );
};

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 }) => {
  const dispatch = useDispatch();
  const classes = useStyles();

  return (
    <Card className={classes.card}>
      <CardMedia className={classes.media} image={angle.image} />
      <div className={classes.overlay}>
        <Typography variant="h6">{angle.qualityName}</Typography>
        <Typography variant="body2">{angle.colors}</Typography>
      </div>
      <div className={classes.overlay2}>
        <Button onClick={handleAddToCart} style={{ color: 'white' }} size="small" onClick={() => setCurrentId(angle._id)}><Add fontSize="large" /></Button>
      </div>
    </Card>

  );
};

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 = (
    <React.Fragment>
      <Button color="secondary" size="small" onClick={props.handleSnackBarCloseProp}>
        UNDO
      </Button>
      <IconButton
        size="small"
        aria-label="close"
        color="inherit"
        onClick={props.handleSnackBarCloseProp}
      >
        <CloseIcon fontSize="small" />
      </IconButton>
    </React.Fragment>
  );

  return (
    <div>
      <Snackbar
        open={props.openState}
        autoHideDuration={6000}
        onClose={props.handleSnackBarCloseProp}
        message="Note archived"
        action={action}
      />
    </div>
  );
}

如您所見，我正在嘗試附加 Child1 Angle代碼中的 onClick 事件，并根據其單擊我嘗試更改另一個child2 CustomSnackbar的狀態值并將其作為道具發送，但是單擊時我沒有得到回應，我該怎么做，還有沒有更簡單的方法來實作這一目標？

uj5u.com熱心網友回復：

onClick按鈕組件上有兩種方法。請根據以下示例進行更改并嘗試。

前：

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

后：

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

標籤：javascript 反应 ecmascript-6

上一篇：將一個功能分配給3個指向外部網站的按鈕

下一篇：需要把這個物件放到一個陣列中，怎么辦？