添加react-hook-form后表单无法工作

Question

在添加react-hook-form以简单地验证表单之后，该字段变为只读。我做错了什么？这是一种网格化的形式。警报正在工作，但我无法写入或发送表单。我正在尝试理解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

​