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

Question

问题：

如果值未更改，如何防止提交？我尝试使用useState执行此操作。

Snippet：

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功能中更改窗口位置，则无需担心将来的状态。您可以使用在渲染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，无论是本地的还是本地的。

希望有帮助。