Question

我试图通过钩子在react中实现contactUS表单.Contact us表单放置在钩子中。当我第一次提交表单时，钩子中的状态没有更新，当我单击第二次设置状态时。我正在返回状态以进行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>
    );
}

挂钩中的状态不会在react中提交的表单上第一次更新

1 个答案: