检查输入是否具有相同的值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>
    )}/>
  )
}

附言：这样做是可行的，但我认为为了这个简单的任务创建useState不值得。我可以用另一种方式检查搜索值吗？

- Arthur

---

这是使用React的方式来处理事情。 - Andrew

@Andrew，嗯，这个问题可能有点奇怪，但我会等待答案。 - Arthur

Answer 1

如果您在handleSubmit函数中更改窗口位置，则无需担心未来的状态。您可以使用在Render prop中传递的dirty属性，例如：

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，可以是本地的，就像您在这里所做的那样，也可以是全局的。

希望能对您有所帮助。

- n3nad

---

嗨！window.location.href实际上是举例而已。通常我同意你的答案！ - Arthur

嗨！我很高兴它能帮到你。 - n3nad