javascript - 带参数调用父函数

Question

我有两个文件(父文件和子文件)。我希望 children 调用 parent 的功能。没问题，我能做到。另一方面，当我给函数提供参数时，我无法从父级那里得到它们...

家长:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import AuthentificationService from "../../api/AuthentificationService"
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import ModalDelete from "../Modal/ModalDelete"
import SimplePopover from "./AddUser";

const useStyles = makeStyles(theme => ({
    root: {
        width: '100%',
        maxWidth: 360,
        backgroundColor: theme.palette.background.paper,
    },
}));

export default function CheckboxList(props) {
    const classes = useStyles();
    const [deleteIt, setDeleteIt] = React.useState(false);
    const [checked, setChecked] = React.useState([0]);
    const [id, setId] = React.useState(0);

    const handleToggle = value => () => {
        const currentIndex = checked.indexOf(value);
        const newChecked = [...checked];

        if (currentIndex === -1) {
            newChecked.push(value);
        } else {
            newChecked.splice(currentIndex, 1);
        }

        setChecked(newChecked);

        alert(value.email)
    };

    const confirmationDeleteUser = value => () => {
        setId(value.id);
        setDeleteIt(true);
    }


/// Here i would like to have my arguments value
    const setDeleteStateAndDelete = value => () => {
        console.log(value); // when i print the value it is empty
        setDeleteIt(false);
    }

    return (
            <div>
                <div>
                    {deleteIt === false ?  "" : <ModalDelete parentMethod={setDeleteStateAndDelete()} title="Suppresion utilisateur" message="Vous allez supprimer un utilisateur, êtes-vous sur ? "/>}
                </div>
            {props.response.map( test => {

                if (props.response.length <= 1) {

                } else {
                    return (
                        <div>
                            <List className={classes.root}>
                        <ListItem key={test} role={undefined} dense button onClick={handleToggle(test)}>
                            <ListItemText primary={`${test.email}`}/>
                            <ListItemSecondaryAction>
                                <IconButton edge="end" aria-label="delete" href="">
                                    <DeleteIcon onClick={confirmationDeleteUser(test)}/>
                                </IconButton>
                            </ListItemSecondaryAction>
                        </ListItem>
                            </List>
                        </div>
                    );
                }
            })}
        </div>
    );
}

我的子组件使用一个参数调用 setDeleteStateAndDelete 函数，但是当我打印这个参数时它是空的。为什么？

子组件:

import React, {Component} from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';


class ModalDelete extends Component {
    constructor(props) {
        super();

        this.state = {
            open: true,
            setOpen: true
        };

        this.handleClickOpen = this.handleClickOpen.bind(this);
        this.handleCloseDelete = this.handleCloseDelete.bind(this);
        this.handleClose = this.handleClose.bind(this);
    }

    handleClickOpen() {
        this.setState({
            setOpen: true,
            open: true
        });
    }

    handleCloseDelete() {
        this.props.parentMethod("test"); //here i put here as arguments
        this.setState({
            setOpen: false,
            open: false
        });
    }

    handleClose() {
        this.props.parentMethod("lol"); //here i put here as arguments
        this.setState({
            setOpen: false,
            open: false
        });
    }

    render() {
        return (
            <div>
                <Dialog
                    open={this.state.open}
                    onClose={this.handleClose}
                    aria-labelledby="alert-dialog-title"
                    aria-describedby="alert-dialog-description"
                >
                    <DialogTitle id="alert-dialog-title">{this.props.title}</DialogTitle>
                    <DialogContent>
                        <DialogContentText id="alert-dialog-description">
                            {this.props.message}
                        </DialogContentText>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={this.handleClose} color="primary" autoFocus>
                            Annuler
                        </Button>
                        <Button onClick={this.handleCloseDelete} color="primary" autoFocus>
                            Confimer
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        );
    }
}

export default ModalDelete;

为什么它适合函数但参数为空？

Answer 1

你必须像这样交换函数的参数:

const setDeleteStateAndDelete = () => value => {
    console.log(value); // when i print the value it is empty
    setDeleteIt(false);
}

第一个参数将在第一次调用时被调用(这里是 ())。

第二次调用将传递给值参数。在您的情况下，该值将是未定义的，因为您在第一次调用中设置了值，而它是空的，因为您调用了 setDeleteStateAndDelete()。第二次调用的值将被忽略，因为参数调用为空 (())。

切换它，应该从子组件设置值。

因为您没有使用 Initial () 柯里化(Currying)函数，您也可以像这样删除第一个括号:

setDeleteStateAndDelete = value => {...}

然后这样设置:

<ModalDelete parentMethod={setDeleteStateAndDelete} title="Suppresion utilisateur" message="Vous allez supprimer un utilisateur, êtes-vous sur ? "/>}

希望这对您有所帮助。