bootstrap-validate和useState的问题(反应)

时间:2019-07-07 18:04:23

标签: reactjs validation callback bootstrap-4 react-hooks

我在表单上使用bootstrap-validate,但遇到了一个非常奇怪的问题。如果我尝试在回调中使用setIsValidEmail,则每当我键入[some-text] @ [some-text] .com时。我无法在“ com”中输入任何通过“ c”的内容。如果我退出回调并仅删除setIsValidEmail,效果很好。

回购:https://github.com/mlelien/testtest

enter image description here

import React, { useState } from 'react'
import * as bootstrapValidate from 'bootstrap-validate'

window.bootstrapValidate = bootstrapValidate

const SignUp2 = () => {
  const [email, setEmail] = useState('')
  const [isValidEmail, setIsValidEmail] = useState(false)

  const onEmailChange = (e) => {
    const newEmail = e.target.value
    setEmail(newEmail)

    bootstrapValidate('#form-email', 'email:Invalid email', (isValid) => {
      setIsValidEmail(isValid)
    })
  }

  return (
    <div className="container">
      <h3>SIGN UP</h3>
      <form>
        <div className="form-group">
          <label htmlFor="form-email">
            Email address
            <input
              type="email"
              className="form-control"
              id='form-email'
              aria-describedby='enter email'
              placeholder='Enter email'
              value={email}
              onChange={onEmailChange}
            />
          </label>
        </div>
      </form>
    </div>
  )
}

export default SignUp2

0 个答案:

没有答案