如何在其他组件中发送状态并从父组件提交？

Question

我想允许用户更新他们的信息。我有两个组件。 UserHeaderInfo & UserBasicInfo.

UserBasicInfo 包含 phonenumber companyname 等信息。 UserHeaderInfo 包含用户头像。

现在我想在UserHeaderInfo 和onClick 按钮事件中添加Edit / Save 和cancle 按钮，我想在UserBasicInfo 中打开编辑表单。

下面是用户界面。

编辑表单与 button 和 edit form 在同一组件中正常工作 (UserBasicInfo)

下面是图片

这是我的代码 用户基本信息

/* eslint-disable @typescript-eslint/no-unused-vars */

export const UserBasicInfo = ({ loading, data }: UserBasicInfoProps) => {
    console.log("data");
    console.log(data);
 
    
    
    const loggedInUserInfo = React.useContext(UserContext);
    
    
    const [isEditable, setIsEditable] = React.useState(false);
   
       const [recordedInfo, setRecordedInfo] = React.useState<MemberBasicInfo>({
        avatar: undefined,
        businessCard: undefined,
        industry: industry,
        companySize:companySize,
        leadershipTitle: leadershipTitle,
        phoneNumber: phoneNumber,
        whatsapp: whatsapp,
        id:memberId
    });

    const [isEditMode, toggleEditMode] = React.useState(false);
 const [updateUserInfo] = useMutation(updateUserInfoQuery);
    const formik = useFormik<MemberBasicInfo>({
        initialValues: recordedInfo,
        onSubmit: (values) => {
            console.log("values");
            
            console.log(values);
            
                    try {
                              updateUserInfo({
                                variables: {
                                    whatsapp:values.whatsapp,
                                    phoneNumber:values.phoneNumber,
                                    leadershipTitle:values.leadershipTitle,
                                    industry:values.industry,
                                    companySize:values.companySize,
                                    id:values.id
                                },
                            }).then(updateResponse=>{
                console.log(updateResponse);
                alert(updateResponse)
            }).catch(updateError=>{
                console.log(updateError);
                 alert(updateError)
                
            })
                    } catch (error) {
                        alert(error)
                    }
               
     
    
        
            
            
            
        },
    });

    const handleToggleExitEditMode = (e: React.MouseEvent<HTMLElement>) => {
        if (isEditMode) formik.resetForm();
        toggleEditMode(!isEditMode)
    }




   

   

    return (
        <UserContext.Consumer>
            {(context) => {
                return (
                    <>
                        <Box
                            sx={{
                                display: "flex",
                                flexDirection: "row",
                                alignItems: "center",
                                alignContent: "stretch",
                                justifyContent: "space-between",
                            }}
                        >
                            <List
                                subheader={<ListSubheader>About</ListSubheader>}
                            ></List>
                            {context.userId === data?.member?.id && (
                                <>
                                  <Button
                            variant="contained"
                            
                            startIcon={isEditMode ? <SaveIcon /> : <EditIcon />}
                            onClick={handleToggleExitEditMode}
                            fullWidth
                        >
                           {isEditMode ? "Save" : "Edit"}
                        </Button>
                        <Button variant="outlined" fullWidth>
                            Cancle
                        </Button>
                                    <Box>
                                        {" "}
                                        {/* <Button
                                            onClick={submitUserInfo}
                                            type="submit"
                                            variant="outlined"
                                            size="medium"
                                        >
                                            Save
                                        </Button> */}
                                     
                                    </Box>
                                </>
                            )}
                        </Box>
                        <Collapse in={isEditMode}>
                           <form onSubmit={formik.handleSubmit}>
            <Stack
                spacing={1.5}
            >
                <Stack
                    direction="row"
                    justifyContent="space-between"
                    alignItems="center"
                >
                    <Typography>Basic Info</Typography>
                
                </Stack>
                <Grid container>
                    <Grid item xs={12} sm={12} md={6} lg={12} p={0.5}>
                        <TextField
                            fullWidth
                            variant="outlined"
                            size="small"
                            id="industry"
                            name="industry"
                            label="Industry"
                            type="text"
                            value={formik.values.industry}
                            onChange={formik.handleChange}
                            error={formik.touched.industry && Boolean(formik.errors.industry)}
                            helperText={formik.touched.industry && formik.errors.industry}
                            disabled={!isEditMode}
                        />
                    </Grid>
                    <Grid item xs={12} sm={12} md={6} lg={12} p={0.5}>
                        <TextField
                            fullWidth
                            variant="outlined"
                            size="small"
                            id="companySize"
                            name="companySize"
                            label="Company Size"
                            type="text"
                            value={formik.values.companySize}
                            onChange={formik.handleChange}
                            error={formik.touched.companySize && Boolean(formik.errors.companySize)}
                            helperText={formik.touched.companySize && formik.errors.companySize}
                            disabled={!isEditMode}
                        />
                    </Grid>
                    <Grid item xs={12} sm={12} md={6} lg={12} p={0.5}>
                        <TextField
                            fullWidth
                            variant="outlined"
                            size="small"
                            id="leadershipTitle"
                            name="leadershipTitle"
                            label="Leadership Title"
                            type="text"
                            value={formik.values.leadershipTitle}
                            onChange={formik.handleChange}
                            error={formik.touched.leadershipTitle && Boolean(formik.errors.leadershipTitle)}
                            helperText={formik.touched.leadershipTitle && formik.errors.leadershipTitle}
                            disabled={!isEditMode}
                        />
                    </Grid>
                    <Grid item xs={12} sm={12} md={6} lg={12} p={0.5}>
                        <TextField
                            fullWidth
                            variant="outlined"
                            size="small"
                            id="phoneNumber"
                            name="phoneNumber"
                            label="Phone Number"
                            type="text"
                            value={formik.values.phoneNumber}
                            onChange={formik.handleChange}
                            error={formik.touched.phoneNumber && Boolean(formik.errors.phoneNumber)}
                            helperText={formik.touched.phoneNumber && formik.errors.phoneNumber}
                            disabled={!isEditMode}
                        />
                    </Grid>
                     <Grid item xs={12} sm={12} md={6} lg={12} p={0.5}>
                        <TextField
                            fullWidth
                            variant="outlined"
                            size="small"
                            id="whatsapp"
                            name="whatsapp"
                            label="whatsapp"
                            type="text"
                            value={formik.values.whatsapp}
                            onChange={formik.handleChange}
                            error={formik.touched.whatsapp && Boolean(formik.errors.whatsapp)}
                            helperText={formik.touched.whatsapp && formik.errors.whatsapp}
                            disabled={!isEditMode}
                        />
                    </Grid>
                       <Grid item xs={12} sm={12} md={6} lg={12} p={0.5}>
                        <TextField
                            fullWidth
                            variant="outlined"
                            size="small"
                            id="whatsapp"
                            name="whatsapp"
                            label="whatsapp"
                            type="text"
                            value={formik.values.whatsapp}
                            onChange={formik.handleChange}
                            error={formik.touched.whatsapp && Boolean(formik.errors.whatsapp)}
                            helperText={formik.touched.whatsapp && formik.errors.whatsapp}
                            disabled={!isEditMode}
                        />
                    </Grid>
                </Grid>
                <Collapse in={isEditMode}>
                    <LoadingButton
                        fullWidth
                        loading={false}
                        variant="contained"
                        type="submit"
                    >Submit
                    </LoadingButton>
                </Collapse>
            </Stack>
        </form >
                            </Collapse>
                          
                        <List>
                            <ListItem>
                                <ListItemIcon>
                                    <GroupWorkIcon />
                                </ListItemIcon>

                                <CustomInput
                                    type="text"
                                    defaultValue={
                                        loading
                                            ? "Loading..."
                                            : data?.member?.chapter?.name
                                    }
                                    aria-label="chapter name"
                                    disabled={!isEditable}
                                    onChange={(e) => setChapter(e.target.value)}
                                />
                            </ListItem>
                            <Divider />
                          
                        </List>
                    </>
                );
            }}
        </UserContext.Consumer>
    );
};

UserHeaderinfo中的代码

export const UserHeaderInfo = ({ loading, data }: UserHeaderInfoProps) => {
    console.log(data?.member?.id);
    const loggedInUserInfo = React.useContext(UserContext);

    return (
        <>
            <Stack m={1} direction="column" alignItems="center" spacing={0.5}>
                <Avatar
                    src={
                        !loading || data?.member.avatar.url
                            ? `${process.env.REACT_APP_BACKEND_STATIC_FILES_URL}${data?.member?.avatar?.url}`
                            : ""
                    }
                    sx={{
                        width: "50%",
                        height: "50%",
                    }}
                />
                <Typography variant="h4">{data?.member?.name}</Typography>
                {
                    <Typography variant="subtitle1">
                        {data?.member?.leadershipTitle}
                    </Typography>
                }
            </Stack>
            <Divider />
            <Stack
                direction="row"
                alignItems="center"
                justifyContent="space-around"
                width="100%"
                paddingY={1}
                spacing={1}
            >
                {loggedInUserInfo.userId === data?.member?.id ? (
                    <>
                        <Button
                            variant="contained"
                            startIcon={<EditIcon />}
                            fullWidth
                        >
                            Edit
                        </Button>
                        <Button variant="outlined" fullWidth>
                            Cancle
                        </Button>
                    </>
                ) : (
                    <>
                        <Button
                            variant="contained"
                            startIcon={<DirectionsRunIcon />}
                            fullWidth
                        >
                            Dance
                        </Button>
                        <Button
                            variant="contained"
                            startIcon={<ThumbUpIcon />}
                            fullWidth
                        >
                            Referral
                        </Button>
                    </>
                )}
            </Stack>
        </>
    );
};

Answer 1

您需要使用 1. 钩子和 2. 使用上下文提供程序包装上下文，它实际上负责在状态更改时跨组件更新该用户。

interface UserContext {
 // example
}

const UserContext = createContext({} as UserContext)

export const useUser = useContext(UserContext)

const UserContextProvider = ({children}: {children: ReactNode}) -> {
  const [userInfo, setUserInfo] = useState(useUser())

  return <UserContext.provider value={{userInfo, setUserInfo}}>
    {props.children}
  </UserContext.Provider>
}

然后你可以在任何孩子身上使用它：

import {useUser} from 'context/user'

const {userInfo, setUserInfo} = useUser()

setUserInfo({}) // this set here will strigger a state update in the context provider and automatically update `userInfo` for any child that was using that context hook.