时间戳

首页 > 解决方案 > 如何在反应中从孩子执行父母动作

javascript - 如何在反应中从孩子执行父母动作

问题描述

我有父组件及其 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的状态值并将其作为道具发送，但是单击时我没有得到一个回应，我该怎么做，还有没有更简单的方法来实现这个？

标签： javascriptreactjsecmascript-6

解决方案

按钮组件上有两种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>

推荐阅读