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

问题：

如果值未更改，如何防止提交
我尝试使用

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>
    )}/>
  )
}

从“React”导入React
从“Formik”导入{Formik，Form，Field}
常量搜索=（）=>{
常量[searchValue，setSearchValue]=useState（“”）
常量handleSubmit=q=>{
window.location.href=`https://for-example.com/search?q=${q}`
}
返回(
{
设置提交（错误）
设置搜索值（q）//
)
}

---

p.S.这是可行的，但我认为不值得为这个简单的任务创建

useState

。我可以用另一种方法检查搜索值吗？

如果你在

handleSubmit

函数中更改窗口位置，你不需要担心将来的状态。你可以使用在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>
    )}/>
  )
}

从“React”导入React
从“Formik”导入{Formik，Form，Field}
常量搜索=（）=>{
常量handleSubmit=q=>{
window.location.href=`https://for-example.com/search?q=${q}`
}
返回(
{
设置提交（错误）
handleSubmit（q）
}}initialValues={{q:''}}render={（{dirty，handleSubmit，isSubmitting}）=>(
提交
)}/>
)
}

如果您在提交时未更改位置，或者出于任何其他原因，可以多次提交同一表单（使用不同的值），而不需要以某种形式提交

state

，可以是本地提交，也可以是全局提交

---

希望能有所帮助。

这是一种应对方式things@Andrew，是的，问这个问题可能会很奇怪，但我会等待答案！window.location.href实际上是作为示例编写的。大体上我同意你的回答！你好我很高兴这有帮助。