ReactJS 表单提交答案

【问题标题】：ReactJS Form SubmissionReactJS 表单提交
【发布时间】：2021-09-08 21:00:13
【问题描述】：

我是 ReactJS 的新手，我正在做一个简单的联系人管理器。在我的 InputContact 组件中，我获取联系人的姓名和电子邮件，并在提交后存储在状态变量中并传递给父级。要检查我的状态变量是否已更新，我检查我的控制台。问题是，在我提供数据后提交表单后，我在控制台中只看到一个空白行。再次点击提交后，我会在控制台中看到我的输入。

我的问题是为什么我必须点击两次提交才能看到我的状态变量得到更新？？

我的 InputContact.js 文件

import React from 'react'
import { useState } from 'react';

const InputContact = (props)=>{

const [name, setName] = useState('');
const [email, setEmail] = useState('');


const validateInput = (e)=>{      
    e.preventDefault();
   
    setName(e.target.fname.value);
    setEmail(e.target.femail.value);

    console.log(name)
 props.addContact(name,email);
    
}   
 
return(
    <>
        <form onSubmit={validateInput}>
            <label>Name
                <input type="text" name='fname' ></input>
            </label>
           <br/>
            <label>Email
                <input type="text" name='femail' ></input>
            </label>
            <button type="submit">Save</button>
        </form>
    </>
)
};
export default InputContact;

我的 App.js 文件是

import Header from './components/Header/Header'
import InputContact from './components/InputContact/InputContact';
import { v4 as uuidv4 } from 'uuid';


function App(){
 const [contacts, setContacts] = useState([]);

 const addContactFn= (name,email)=>{
   setContacts([...contacts, {id:uuidv4(), name:name, email:email}]);
   
 }
 return(
   <>
   <Header />
   <InputContact addContact = {addContactFn}/>
   </>
 )
}
export default App;  ```

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

您的setName 调用是异步的。你不能保证

console.log(name)

紧接着

setName(e.target.fname.value);

【讨论】：

不是不能保证，它永远不会立即可用。

【解决方案2】：

您使用状态的方式并不是真正的正常方式。您想在输入上使用 onChange 处理程序来设置每个姓名和电子邮件的状态，例如

onChange={(e)=> setEmail(e.target.value)}

那么您的表单的onSubmit 应该引用状态变量的名称和电子邮件，而不是e.target.value

const validateInput = (e)=>{      
    e.preventDefault();
 props.addContact(name,email);
    
}

【讨论】：

我知道在输入上使用 onChange ，但是这个方法在每次击键后更新状态。我只想在用户提交表单后设置状态。

【解决方案3】：

要检查更新的值，可以使用 useEffect hook as

import React from 'react'
import { useState, useEffect } from 'react';

.
.
.
useEffect(() => {
  console.log('Name', name);
}, [name]);

const validateInput = (e)=>{      
    e.preventDefault();
   
    setName(e.target.fname.value);
    setEmail(e.target.femail.value);

 props.addContact(name,email);
    
}
.
.
.

【讨论】：

【解决方案4】：

我是这样做的，所以输入和发送时状态会更新。

<form onSubmit={validateInput}>
        <label>Name
            <input type="text" name='fname' onChange={e => setName(e.target.value) ></input>
        </label>
       <br/>
        <label>Email
            <input type="text" name='femail'  onChange={e => setEmail(e.target.value) ></input>
        </label>
        <button type="submit">Save</button>
</form>

【讨论】：