钩子内的状态第一次在表单提交时没有更新

Question

我试图在使用钩子的反应中实现contactUS表单。联系我们表单放置在钩子内。当我第一次提交表单时，钩子中的状态没有更新，当我点击第二次设置状态时。我正在返回状态到类组件，在那里进行 api 调用。

//contactushook.js

import React, { useState } from 'react';

const ContactUshook = ({ parentCallBack }) => {
    const [data, setData] = useState([]);
    const handleSubmit = (event) => {
        event.preventDefault();
        setData({ name: document.getElementById('name').value, email: document.getElementById('email').value, message: document.getElementById('message').value });

        console.log(data);
        parentCallBack(data);
    }

    return <React.Fragment>
        <div className="form-holder">
            <form onSubmit={handleSubmit}>
                <div>
                    <input id="name" type="text" placeholder="enter the name"></input>
                </div>
                <div>
                    <input id="email" type="email" placeholder="enter the email"></input>
                </div>
                <div>
                    <textarea id="message" placeholder="Type message here"></textarea>
                </div>
                <button type="submit" >Submit</button>
            </form>
        </div>

    </React.Fragment >

}

export default ContactUshook;

//contactus.js

import React, { Component } from 'react';
import ContactUshook from './hooks/contactushook';
import '../contactUs/contactus.css';
class ContactComponent extends Component {

    onSubmit = (data) => {
        console.log('in onsubmit');
        console.log(data);
    }
    render() {
        return (
            <div>
                <h4>hook</h4>
                <ContactUshook parentCallBack={this.onSubmit}></ContactUshook>
            </div>
        );
    }
}

export default ContactComponent;

Answer 1

停止使用文档查询并开始使用状态！

您的 ContactUshook 组件应如下所示：

const ContactUshook = ({ parentCallBack }) => {
    const [data, setData] = useState({ name: '', email: '', message: '' });

    const handleSubmit = () => {
        event.preventDefault();
        parentCallBack(data);
    }

    const handleChange = (event, field) => {
        const newData = { ...data };
        newData[field] = event.target.value;
        setData(newData);
    }

    return (
        <div className="form-holder">
            <form onSubmit={handleSubmit}>
                <div>
                    <input 
                        id="name" 
                        type="text" 
                        value={data.name}
                        placeholder="enter the name" 
                        onChange={(e) => handleChange(e,'name')} />
                </div>
                <div>
                    <input 
                        id="email" 
                        type="email" 
                        value={data.email} 
                        placeholder="enter the email" 
                        onChange={(e) => handleChange(e,'email')} />
                </div>
                <div>
                    <textarea 
                        id="message" 
                        value={data.message} 
                        placeholder="Type message here" 
                        onChange={(e) => handleChange(e,'message')} />
                </div>
                <button type="submit" >Submit</button>
            </form>
        </div>
    );
}