Question

我找到的唯一与此有关的答案是未将事件传递给函数的答案。这里情况不同。我显然将事件作为变量e传递。我的按钮类型为“提交”，因此该表单随事件一起提交。此外，handleChange函数可与事件一起正常使用。我从我正在上的Udemy课程中复制了这种格式，实际上我有完全一样的东西。我能想到的唯一最大区别是，Udemy课程将所有这些逻辑都放在一个单独的组件中，该组件被导入到页面中，然后呈现到页面中，其中，表单和表单处理逻辑是该页面上的主要组件。 / p>

请查看我的代码，并告诉我我做错了！

错误：

代码：

import React, { useState, useEffect } from 'react'
import Router, { withRouter } from 'next/router';
import Layout from '../../components/Layout';
import { Col, Row, Button, Form, FormGroup, Label, Input } from 'reactstrap';
import { createPatient } from '../../actions/patient';

const CreatePatient = ({ router }) => {

    const [ values, setValues ] = useState({
        error: '',
        formData: '',
        data: ''
    });

    const { error, formData } = values;

    useEffect(() => {
        setValues({
            ...values,
            formData: new FormData()
        })
    }, [router])

    const createPatient = (e) => {
        e.preventDefault();
        
        createPatient(formData).then(data => {
            if (data.error) {
                setValues({ ...values, error: data.error });
            }
        })
    }

    const handleChange = name => e => {
        const value = e.target.value;
        
        formData.set(name, value);

        setValues({ ...values, [name]: value, formData, error: '' });
    }

    return (
        <Layout>
            <section className="container pt-3">
                <form className="form" onSubmit={ createPatient }>
                    <div className="row">
                        <div className="col-md-4 my-2">
                            <label htmlFor="firstName">First Name</label>
                            <input type="text" className="form-control" name="firstName" id="firstName" onChange={handleChange('firstName')}/>
                        </div>
                        <div className="col-md-4 my-2">
                            <label htmlFor="lastName">Last Name</label>
                            <input type="text" className="form-control" name="lastName" id="lastName" onChange={handleChange('lastName')}/>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-sm-2">
                            <button type="submit" className="btn btn-primary">Create</button>
                        </div>
                    </div>
                </form>
            </section>
        </Layout>
    )
}

export default withRouter(CreatePatient);

Answer 1

您正在createPatient内部呼叫createPatient，同时传递了一个非事件。代替这个：

const createPatient = (e) => {
    e.preventDefault();
        
    createPatient(formData).then(data => {
        if (data.error) {
            setValues({ ...values, error: data.error });
        }
    })
}

只需将其更改为以下形式：

const createPatient = (e) => {
    e.preventDefault();
        
    // run your API call here, then...
    if (data.error) {
        setValues({ ...values, error: data.error });
    }
}

Answer 2

这里的e方法中的createPatient 符号不是事件，这就是为什么会出现错误的原因。在提交中，您将获得返回的元素，而不是事件。因此，e是您的元素。

标记

<form className="form" onSubmit={ createPatient }

js

const createPatient = (e) => {
    console.log(e); // the form div
    
    createPatient(formData).then(data => {
        if (data.error) {
            setValues({ ...values, error: data.error });
        }
    })
}

e.preventDefault（）不是函数NextJS / React

2 个答案: