Проверьте, имеет ли вход одинаковое значение. - PullRequest
Новая
       3

Проверьте, имеет ли вход одинаковое значение.

3 голосов
/ 04 октября 2019

Вопрос :

Как запретить отправку, если значение не изменилось?
Я пытался сделать это, используя 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>
    )}/>
  )
}

PS Это работает, но я думаю, что это не такСтоит создать useState для этой простой задачи. Могу ли я проверить значение поиска по-другому?

1 Ответ

3 голосов
/ 05 октября 2019

Если вы меняете расположение окна в функции handleSubmit, вам не нужно беспокоиться о будущих состояниях. Вы можете использовать dirty prop, переданный в render 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 в некоторой форме, либо локально, как вы сделали здесь, или глобально.

Надеюсь, это поможет.

...