时间戳

首页 > 解决方案 > 如何使用一个函数传递对象？

reactjs - 如何使用一个函数传递对象？

问题描述

如何仅使用一个函数将对象从一个组件传递到另一个组件？我想从“PersonalData”（嵌套组件）发送键和值并识别它们并存储在 userFormular（主组件）中。

我可以将许多功能作为道具传递给组件，但如果我有超过 4 个，它看起来并不干净。

import React, {useState} from 'react'
import PersonalData from './PersonalData'

export default function UserFormular() {
    const initialData={
        name:'Johnny',
        lastName:'Bravo',
        email:'email@email.com'
    }
    const [data,setData] = useState(initialData)   
    function updateData(){       
        <1???>
    }    
       return( 
             <PersonalData updateData={updateData} />
       )   
}

import React, {useContext, useState} from 'react'
import {MyContext} from '../utils/CustomContext'
import Header from './Header'
//MATERIAL UI 

import TextField from '@mui/material/TextField';

//START
export default function PersonalData({updateData, nextPage }) {
    const [name,setName]=useState("Name")
    const [lastName,setLastName]=useState("Last name")
    const [email,setEmail]=useState("email")


    const darkMode = useContext(MyContext)
    const myStyle={
        myButtonContainer:{
            marginTop:"100px",
            display:"flex",
            flexDirection:"column",
            justifyContent:"center",
            alignItems:"center"
        },
        myButton:{
            backgroundColor:darkMode ? "#888" : "#111",            
        }
    }
 
    function handleData(e){
        updateData();
        <2???>
    }
    return (
       <>        
            <div style={myStyle.myButtonContainer}>              
                <TextField
                    helperText="Please enter your name"                    
                    label={name}
                    onChange={handleData}
                    sx={{m:6, mb:2}}
                />
                <TextField
                    helperText="Please enter your last name"                    
                    label={lastName}
                    onChange={handleData}
                    sx={{m:2}}
                />
                <TextField
                    helperText="Please enter your email"                    
                    label={email}
                    onChange={handleData}
                    sx={{m:2}}
                />
            </div>      
        </>       
    )
}

谢谢你的回答。卡米尔

标签： reactjs

解决方案

让代码看起来更干净的一个建议：定义一个接口来简化数据

export interface DataInterface {
    name: string;
    lastName: string;
    email: string;
}

在 PersonalData 函数中：

const [data,setData]=useState<DataInterface>();

useEffect(() => {
    const data = updateData();
    setData(data);
}, []);

推荐阅读