我放了一个提交测试按钮，但没有任何数据。
有关代码的OBS：
我的onSubmit函数是一个console.log，具有来自表单的数据，但是我得到的只是一个空对象。
我有以下代码
import React, { useState } from 'react'
import useForm from 'react-hook-form'
import Select from 'react-select'
import { FaRegFileAlt, FaRegImage } from 'react-icons/fa'
import { FilePond, registerPlugin } from 'react-filepond'
import { IoIosImages } from 'react-icons/io'
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
import TextField from '@material-ui/core/TextField'
import Button from '~/components/Button'
import ProductsModal from '~/components/Sponsor/Modals/ProductsModal'
import IconsProductImage from '~/components/Sponsor/IconsProductImage'
import Border from '~/components/Border'
import ProductBadge from '~/components/ProductBadge'
import * as S from './styled'
registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview)
export default function ModalAnnouncement({ handleCloseModal, showModal }) {
const [title, setTitle] = useState('')
const [tags, setTags] = useState([])
const [about, setAbout] = useState('')
const [files, setFiles] = useState('')
const [filePreview, setFilePreview] = useState('')
const [images, setImages] = useState('')
const [updatingFile, setUpdatingFile] = useState(false)
const [updatingImage, setUpdatingImage] = useState(false)
const { handleSubmit, setValue } = useForm()
function onSubmit(data) {
console.log('data', data)
}
function handleUpdatingFile() {
setUpdatingFile(!updatingFile)
}
function handleUpdatingImage() {
setUpdatingImage(!updatingImage)
}
function handleUpdateImages(event) {
setImages(event)
setFilePreview(event.length === 0 ? '' : URL.createObjectURL(event[0].file))
}
function handleTagsChange(tags) {
setValue('tags', tags)
setTags(tags)
}
const tagsAvailable = [
{ value: 1, label: 'artificial intelligence' },
{ value: 2, label: 'digital marketing' },
{ value: 3, label: 'big data' },
{ value: 4, label: 'blogging' },
{ value: 5, label: 'chatbot' },
{ value: 6, label: 'content marketing' },
{ value: 7, label: 'digital loyalty' },
{ value: 8, label: 'digital transformation' },
{ value: 9, label: 'email marketing' },
{ value: 10, label: 'engagement' },
]
const reactSelectStyleCustom = {
control: (base, state) => ({
...base,
boxShadow: state.isFocused ? 0 : 0,
borderColor: state.isFocused ? '#50A5D2' : base.borderColor,
borderWidth: state.isFocused ? '1px' : '1px',
'&:hover': {
borderColor: state.isFocused ? '#50A5D2' : base.borderColor,
},
}),
placeholder: defaultStyles => {
return {
...defaultStyles,
color: '#A1A1A1',
fontSize: '16px',
}
},
singleValue: provided => {
const overflow = 'visible'
const fontStyle = 'normal'
const transition = 'opacity 300ms'
return { ...provided, overflow, fontStyle, transition }
},
}
return (
<ProductsModal
modalTitle="New Announcement"
handleCloseModal={handleCloseModal}
showModal={showModal}
leftColumn={
<form onSubmit={handleSubmit(onSubmit)}>
<S.FormContainer>
<S.InputTitle>Title</S.InputTitle>
<TextField
fullWidth={true}
variant="outlined"
name="title"
placeholder="Give your announcement a title"
type="text"
value={title}
onChange={e => setTitle(e.target.value)}
/>
<div className="mt-3">
<S.InputTitle>About</S.InputTitle>
<TextField
fullWidth={true}
variant="outlined"
name="about"
multiline
rows="4"
placeholder="Tell them a little more about your announcement"
type="text"
value={about}
onChange={e => setAbout(e.target.value)}
/>
</div>
<div className="mt-3">
<S.InputTitle>Tags</S.InputTitle>
<Select
styles={reactSelectStyleCustom}
isMulti
options={tagsAvailable}
placeholder="Add tags to your announcement"
value={tags}
onChange={handleTagsChange}
/>
</div>
<div className="mt-4 mb-2">
<Border />
</div>
{updatingFile ? (
<div className="mt-2">
<div className="d-flex justify-content-center align-items-center">
<FaRegFileAlt className="mr-2" size={14} />{' '}
<S.InputTitle>Files</S.InputTitle>
</div>
<FilePond
allowMultiple={false}
files={files}
onupdatefiles={setFiles}
/>
</div>
) : (
<div className="d-flex justify-content-center">
<Button
text="Add file"
type="button"
color="#5A6978"
action={handleUpdatingFile}
width="160px"
height="40px"
/>
</div>
)}
{updatingImage ? (
<div className="mt-3">
<div className="d-flex justify-content-center align-items-center">
<FaRegImage className="mr-2" size={14} />{' '}
<S.InputTitle>Images</S.InputTitle>
</div>
<FilePond
allowMultiple={false}
files={images}
onupdatefiles={handleUpdateImages}
/>
</div>
) : (
<div className="d-flex justify-content-center">
<Button
text="Add image"
type="button"
color="#5A6978"
action={handleUpdatingImage}
width="160px"
height="40px"
/>
</div>
)}
<div className="d-flex justify-content-center">
<Button
text="Submit Form"
type="submit"
color="#5A6978"
action={(event) => { event.persist(); handleSubmit(event) }}
width="160px"
height="40px"
/>
</div>
</S.FormContainer>
</form>
}
rightColumn={
<>
<S.Phone>
<S.Screen>
<S.Content>
<div className="image-container">
{filePreview !== '' ? (
<>
<img className="animated fadeIn" src={filePreview} />
<IconsProductImage right="0" top="30%" />
<div className="ml-2 mt-3">
<S.ProductTitle>{title}</S.ProductTitle>
</div>
<div
style={{ marginTop: '-10px' }}
className="d-flex ml-2"
>
<ProductBadge
text="annoucement"
color="#D40707"
textColor="#FFF"
width="135px"
height="30px"
eventText="- engagement"
eventTextColor="#87919A"
/>
</div>
</>
) : (
<>
<img
style={{
postison: 'relative',
backgroundColor: '#CCC',
}}
className="d-flex justify-content-center align-items"
/>
<IoIosImages
style={{
position: 'absolute',
top: '125px',
right: '125px',
}}
color="red"
size={28}
/>
<div className="ml-2 mt-3">
<S.ProductTitle>
{title === '' ? (
'Title'
) : (
<S.ProductTitle>{title}</S.ProductTitle>
)}
</S.ProductTitle>
</div>
<div
style={{ marginTop: '-10px' }}
className="d-flex ml-2"
>
<ProductBadge
text="annoucement"
color="#D40707"
textColor="#FFF"
width="135px"
height="30px"
eventText="- engagement"
eventTextColor="#87919A"
/>
</div>
<S.AboutSection>
<span>{about}</span>
</S.AboutSection>
</>
)}
</div>
</S.Content>
</S.Screen>
<S.Home />
</S.Phone>
</>
}
/>
)
答案 0 :(得分：2)
react-hook-form不能与受控输入元素一起使用。
您的输入元素具有一个附加的onChange处理函数，可以有效地使您的表单成为受控表单。如果需要这样做，则应从setValue中拉出useForm方法，并手动更新要与react-hook-form一起使用的值。
请参阅本页底部，以了解有关将react-hook-form与受控元素一起使用的更多信息。 React Hook Form FAQ