如何在模态中显示形式值

Question

我正在尝试做一个模态，显示以前在表单中提交的值。我正在使用ReactJs。

这是我的ContactForm.js：在这里我定义了不同的输入、验证和函数。

import React, {useState} from 'react'
import SubmitBtn from '../atoms/SubmitBtn';
import './ContactForm.css'
import './Modal.css'
import FormInput from '../molecules/FormInput'
import Modal from './Modal';

const ContactForm = () => {
const [ isOpen, setIsOpen ] = useState(false)
const [data, setData] = useState({
key: '',
value: ''
})
const [values, setValues ] = useState({
name: '',
lastname: '',
email: '',
confirmEmail: '',
message: ''
});
const inputs = [
{
id: 1,
name: 'name',
type: 'text',
placeholder: 'Name',
required: true,
pattern: '^[a-zA-Z]+$',
errorMessage: 'Only letters are allowed '
},
{
id: 2,
name: 'lastname',
type: 'text',
placeholder: 'Last Name',
required: true,
pattern: '^[a-zA-Z]+$',
errorMessage: 'Only letters are allowed '
},
{
id: 3,
name: 'email',
type: 'email',
placeholder: 'Email',
required: true,
errorMessage: 'Invalid email'
},
{
id: 4,
name: 'confirmEmail',
type: 'email',
placeholder: 'Confirm Email',
required: true,
pattern: values.email,
errorMessage: 'Emails don´t match'
},
{
id: 5,
name: 'message',
type: 'text',
placeholder: 'Message',
required: true,
errorMessage: 'This field cannot be empty'
}
]

const handleSubmit = (e) => {
const formData = new FormData(e.currentTarget)
e.preventDefault();
for( let [key, value] of formData.entries()){
setData({
key: key,
value:value
})
}
setIsOpen(true)

}
const handleClose = () =>{
setIsOpen(false)
}
const onChange = (e) => {
setValues({...values, [e.target.name]: e.target.value}); 
}  
return (
<div>
<Modal 
open={isOpen} 
handleClose={handleClose}
data={data}      
/>

<form className='contactForm' onSubmit={handleSubmit}>
{inputs.map((input) => (
<FormInput 
key={input.id} 
{...input} 
value={values[input.name]} 
onChange={onChange}
/>
))}
<SubmitBtn handleSubmit={handleSubmit} />    
</form>
</div>
)
}
export default ContactForm

FormInput.js：在这里，我显示了不同的输入字段和每个对应输入字段的errorMessage。

import React from 'react'
import './FormInput.css';
import { Input } from '../atoms/Input';
import ErrorSpan from '../atoms/ErrorSpan';
const FormInput = (props) => {
const { id, onChange, errorMessage, ...inputProps } = props;
return (
<div className='formInput'>        
<Input 
{...inputProps} 
onChange={onChange} 
/> 
<ErrorSpan 
errorMessage={props.errorMessage}
/>        
</div>
)
}
export default FormInput

Modal.js：到目前为止，我只有一个按钮可以触发一个函数，该函数将isOpen的值再次更新为false，以关闭模态。如果开放变量为true，则组件将呈现模态。问题是，我如何才能将以我的表单提交的数据以这种模式显示出来？

import React from 'react'
const Modal = ({ open, handleClose, data }) => {
if(!open) return null
return (
<div className='wrapper'>
<div className="modal-container">
<div className="modal">
<input>{data.key}</input>
<button onClick={handleClose} >Close</button>
</div>
</div>
</div>
)
}
export default Modal

Answer 1

您应该正确设置状态，它将返回所提供代码中的最后一个元素。所以像这个一样改变它

const [data, setData] = useState([])
......
const handleSubmit = (e) => {
const formData = new FormData(e.currentTarget)
e.preventDefault();
let results = [];
for( let [key, value] of formData.entries()){
results.push({
key: key,
value:value
})
}  
setData(results);

setIsOpen(true)

}

Answer 2

我建议最好的方法是在contactForm.js中使用模态，然后使用state，或者，如果你没有这样做，那么使用这个方法来获得实际的表单数据，并将数据传递给模态的组件

const handleSubmit = (event) => {
const formData = new FormData(event.currentTarget);
event.preventDefault();
for (let [key, value] of formData.entries()) {
console.log(key, value);
}
};

可以使用该结果。我希望这能给你打气✨