reactjs - 如何在 React 中将handlSubmit 和 handleChange 函数从父级传递给子级

Question

我正在做一个 React 项目，我有三个组件 Home、Studentlist、Card。

在这个项目中，Studentlist 是 Card 组件的 Parent，而 Card 组件也是 Child

学生列表组件。现在我正在尝试从

通过使用 props 将学生列表组件转换为卡片组件。但它不能正常工作。

请帮助我有人通过 handleSubmit 和 handleChange 函数从父传递到

反应中的孩子。

这是 Studentlist.js

import React, { useState } from 'react';
import axios from 'axios';
import './Studentslist.css';
import Card from '../../Components/Card/Card';

function Studentslist(props) {
    const [show, setShow] = useState(false);

    const [data, sendData] = useState({})

    const postData = async() => {
        try {
            const result = await axios.post('http://localhost:5000/api/signup', data)
            sendData(result)
            console.log(result)
        } catch(error) {
            console.log(error)
        }
    }

    const handleChange = ({ target }) => {
        const { name, value } = target
        const newData = Object.assign({}, data, { [name]: value })
        sendData(newData)
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        console.log(data)
        postData()
    }


    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Departments'>
                        <button className='btn btn-primary'>Hockey</button>
                        <button onClick={() => setShow(true)} className='btn btn-primary ml-2'>Cricket</button>
                    </div>
                    <div className='table-responsive'>
                        <table className='table align-items-center table-flush'>
                            <thead className='thead-light'>
                                <tr>
                                    <th scope='col'>No:</th>
                                    <th scope='col'>Firstname</th>
                                    <th scope='col'>Lastname</th>
                                    <th scope='col'>Email</th>
                                    <th scope='col'>Password</th>
                                    <th scope='col'>Qualification</th>
                                    <th scope='col'>Branch</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    {show && <Card setShow={() => setShow(false)}
                        firstname={'Firstname'}
                        lastname={'Lastname'}
                        email={'Email'}
                        password={'Password'}
                        qualification={'Qualification'}
                        branch={'Branch'}

                        firstNameValue={'firstname'}
                        lastNameValue={'lastname'}
                        emailValue={'email'}
                        passwordValue={'password'}
                        qualificationValue={'qualification'}
                        branchValue={'branch'}

                        handleChange={'handleChange()'}

                        handleSubmit={'handleSubmit()'}
                    >
                    </Card>}
                </div>
            </div>
        </div>
    )
}

export default Studentslist

这是 Card.js

import React, { useState } from 'react';
import './Card.css';

function Card(props) {
    const { setShow } = props;
    return (
        <div className='container'>
            <div className='row justify-content-center'>
                <div className='col-6'>
                    <div className='Registration'>
                        <form onSubmit={props.handleSubmit}>
                            <div className="form-group">
                                <label htmlFor="firstname">{props.firstname}</label>
                                <input type="text" name={props.firstNameValue} onChange={props.handleChange} className="form-control" id="firstname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="lastname">{props.lastname}</label>
                                <input type="text" name={props.lastNameValue} onChange={props.handleChange} className="form-control" id="lastname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="email">{props.email}</label>
                                <input type="email" name={props.emailValue} onChange={props.handleChange} className="form-control" id="email"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">{props.password}</label>
                                <input type="password" name={props.passwordValue} onChange={props.handleChange} className="form-control" id="password"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="qualification">{props.qualification}</label>
                                <input type="text" name={props.qualificationValue} onChange={props.handleChange} className="form-control" id="qualification"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="branch">{props.branch}</label>
                                <input type="text" name={props.branchValue} onChange={props.handleChange} className="form-control" id="branch"></input>
                            </div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                            <button type="button" onClick={setShow} className='cancel btn btn-danger ml-2'>Cancel</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Card

如果您觉得我的疑问不清楚，请发表评论谢谢。

标签： reactjs

Answer 1

您将 props 传递给Card不正确，它不是handleChange={'handleChange()'} handleSubmit={'handleSubmit()'}，更改为此

handleChange={handleChange}
handleSubmit={handleSubmit}