添加 react-hook-form 后表单不工作

Question

添加react-hook-form来简单验证表单后，该字段变为只读。我究竟做错了什么？。这是一个 netlify 的形式。警报有效，但我无法编写或发送表格。我试图了解 react-hook-form 是如何工作的。我是否必须更改表单的所有逻辑？ react-hook-form 是否处理所有事情？

import React, { useState } from 'react'
import { navigate } from 'gatsby'
import { FormWrapper } from './ContactForm.styles'

// import react-hook-form
import { useForm } from 'react-hook-form'

const contact = () => {
  const [formState, setFormState] = useState({
    name: '',
    email: '',
    message: ''
  })

  const encode = data => {
    return Object.keys(data)
      .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
      .join('&')
  }

  const handleChange = e => {
    setFormState({
      ...formState,
      [e.target.name]: e.target.value
    })
  }
  // react-hook form
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm()

  // submit
  const handleRegistration = e => {
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({ 'form-name': 'contact', ...formState })
    }).then(() => {
      navigate('/thanks/')
    })
  }

  return (
    <form
      onSubmit={handleSubmit(handleRegistration)}
      name="contact"
      method="POST"
      data-netlify="true"
      data-netlify-honeypot="bot-field"
    >
     
      <FormWrapper>
        <div className="form-name">
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            name="name"
            onChange={handleChange}
            value={formState.name}
            placeholder="your name..."
            id="name"
            // react-hook-form
            aria-invalid={errors.name ? 'true' : 'false'}
            {...register('name', { required: true })}
          />
          // react-hook-form
          {errors.name && <span role="alert">Required</span>}

          <button type="submit">Submit</button>
        </div>
      </FormWrapper>
    </form>
  )
}

export default contact

Answer 1

根据React Hook Form - Getting Started

import React, { useState } from 'react'
import { navigate } from 'gatsby'
import { FormWrapper } from './ContactForm.styles'

// import react-hook-form
import { useForm } from 'react-hook-form'

const contact = () => {
  
  const encode = data => {
    return Object.keys(data)
      .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
      .join('&')
  }

  // react-hook form
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm()

  // submit
  const handleRegistration = (values) => {
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({ 'form-name': 'contact', ...values })
    }).then(() => {
      navigate('/thanks/')
    })
  }

  return (
    <form
      onSubmit={handleSubmit(handleRegistration)}
      data-netlify="true"
      data-netlify-honeypot="bot-field"
    >
     
      <FormWrapper>
        <div className="form-name">
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            placeholder="your name..."
            id="name"
            aria-invalid={errors.name ? 'true' : 'false'}
            {...register('name', { required: true })}
          />
          // react-hook-form
          {errors.name && <span role="alert">Required</span>}

          <button type="submit">Submit</button>
        </div>
      </FormWrapper>
    </form>
  )
}

export default contact

添加 react-hook-form 后表单不工作

Form not working after add react-hook-form

reactjs

react-hook-form