检查输入是否具有相同的值 React

Question

问题：

如果值没有改变，如何防止提交？
我尝试使用 useState.

来做到这一点

片段：

import React from 'react'
import {Formik, Form, Field} from 'formik'

const Search = () => {

  const [searchValue, setSearchValue] = useState('')

  const handleSubmit = q => {
    window.location.href = `https://for-example.com/search?q=${q}`
  }

  return (
    <Formik onSubmit={({q}, {setSubmitting}) => {
      setSubmitting(false)
      setSearchValue(q) // <===
      return q !== searchValue && handleSubmit(q) // <===
    }} initialValues={{q: ''}} render={() => (
      <Form>
        <Field name='q' />
      </Form>
    )}/>
  )
}

P.S. 这可行，但我认为不值得为这个简单的任务创建 useState。我可以用其他方式检查搜索值吗？

Answer 1

如果您要更改 handleSubmit 函数中的 window 位置，则无需担心未来的状态。您可以使用在 render prop 中传递的 dirty prop，像这样：

import React from 'react'
import {Formik, Form, Field} from 'formik'

const Search = () => {

  const handleSubmit = q => {
    window.location.href = `https://for-example.com/search?q=${q}`
  }

  return (
    <Formik onSubmit={({q}, {setSubmitting}) => {
      setSubmitting(false)
      handleSubmit(q)
    }} initialValues={{q: ''}} render={({ dirty, handleSubmit, isSubmitting }) => (
      <form onSubmit={handleSubmit}>
        <Field name='q' />
        <button type="submit" disabled={!dirty || isSubmitting}>
          Submit
        </button>
      </form>
    )}/>
  )
}

如果您在提交时没有更改位置，或者出于任何其他原因可以多次提交相同的表单（具有不同的值），那么您需要 state 某种表单，就像您所做的那样此处，或全球。

希望对您有所帮助。