從另一個組件調用函數

Question

我有我的文件：

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 ModifyUser from "./ModifyUser" ----------> file i import where my function is

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

export default function CheckboxList(props) {
    const classes = useStyles();
    const [checked, setChecked] = 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 deleteUser = value => () => {
        AuthentificationService.deleteUser(value.id)
            .then((data) => {
            console.log(data);

        }) .catch((error) => {
            console.log(error)
        })
        handleClickOpen(); ---------> here i would like to call this function from the file ./ModifyUser
    }

    return (
        <List className={classes.root}>
            {props.response.map( test => {

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

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

我想從文件 ./ModifyUser 調用 handleClickOpen。

文件修改用戶為：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import ListItem from '@material-ui/core/ListItem';
import List from '@material-ui/core/List';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import CloseIcon from '@material-ui/icons/Close';
import Slide from '@material-ui/core/Slide';
import TextField from "@material-ui/core/TextField";
import AuthentificationService from "../../api/AuthentificationService";

const useStyles = makeStyles(theme => ({
    appBar: {
        position: 'relative',
    },
    title: {
        marginLeft: theme.spacing(2),
        flex: 1,
    },
}));

const Transition = React.forwardRef(function Transition(props, ref) {
    return <Slide direction="up" ref={ref} {...props} />;
});

export default function FullScreenDialog() {
    const classes = useStyles();
    const [open, setOpen] = React.useState(false);
    let username = "";
    let email = "";
    let password = "";

    function handleClickOpen() {   ---------> i would like to call this function
        setOpen(true);
    }

    function handleClose() {
        setOpen(false);
    }

    /// Set the state when the texfield change
    function textFieldChange(e) {
        if (e.target.id.localeCompare("Username") === 0) {
            username = e.target.value;

        }  else if (e.target.id.localeCompare("Email") === 0) {
            email = e.target.value;
        }  else if (e.target.id.localeCompare("Password") === 0) {
            password = e.target.value;
        }
    }

    async function handleSubmit() {
        alert(email);
        alert(password);
        try {
            await AuthentificationService.addUser({
                username: username;
            })  .then((data) => {
                console.log(data)
            })
        } catch (error) {
            console.log(error)
        }
    }

    return (
        <div>
            <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
                <AppBar className={classes.appBar}>
                    <Toolbar>
                        <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
                            <CloseIcon />
                        </IconButton>
                        <Typography variant="h6" className={classes.title}>
                            New User
                        </Typography>
                        <Button color="inherit" onClick={() => {
                            handleSubmit();
                            handleClose();
                        }}>
                            YES
                        </Button>
                    </Toolbar>
                </AppBar>
                <List>
                    <ListItem button>
                        <TextField className="fontLogin"
                                   onChange={textFieldChange}
                                   label="Username"
                                   style={{width: '55%'}}
                                   id="Username"
                        />
                    </ListItem>
                </List>
            </Dialog>
        </div>
    );
}

我想調用這個文件的 handleClickOpen 但在另一個文件中。

當我調用它時，我收到錯誤“不存在”。

我導入了我的文件，為什么他找不到它？

也許它在不同的班級，所以我應該有 getter 或類似的東西嗎？

我誤會了什么？

Answer 1

一些初步想法：

看起來您在“導出”中導出了很多功能。 您是否嘗試過移動功能，然后導出文件本身，而不是導出功能？

此外，handleClickOpen() 寫在 FullScreenDialogue() 內部。 這讓我認為要調用它，您必須首先調用 FullScreenDialogue --- 您將無法將 handleClickOpen 作為獨立函數調用。

Answer 2

首先，你的函數handleClickOpen屬於FullScreenDialog類，所以你應該導入這個類：

import FullScreenDialog from "./ModifyUser";

其次， handleClickOpen函數管理必須在某處呈現以便調用其函數的組件的狀態。 如果您想在渲染組件之前調用此函數（或觸發組件渲染），您可以嘗試將此函數設為static但隨后您無法使用函數中的this上下文（包括組件的狀態）。