javascript - React - onSubmit 表单没有任何数据

Question

我放置了一个提交测试按钮，但它没有获取任何数据。

关于代码的OBS:

1. 我正在使用 react 选择
2. 我正在使用 filepond 上传图像和文件(工作正常)
3. ProductsModal 是一个具有 rightColumn 和 leftColumn 的模态组件(左列是表单，右列有一个包含动态内容的手机图像，其中是表单的预览。

我的 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>
        </>
      }
    />
  )

Answer 1

react-hook-form 不是为与受控输入元素一起使用而构建的。

您的输入元素附加了一个 onChange 处理程序，这有效地使您的表单成为受控表单。如果这是有意的，您应该将 setValue 方法从 useForm 中取出，并手动更新要与 react-hook-form 一起使用的值。

请参阅本页底部，了解有关使用 react-hook-form 与受控元素的更多信息。 React Hook Form FAQ