Данные формы, удаляемые после нажатия React-Recaptcha - PullRequest
Новая
       4

Данные формы, удаляемые после нажатия React-Recaptcha

1 голос
/ 07 января 2020

Я использую react-recaptcha в форме на моем сайте. Все работает нормально, но когда я нажимаю recaptcha, когда он возвращает успех, все данные формы удаляются. Я могу, конечно, ввести его заново, но это ужасный интерфейс. Почему это удаляется и как я могу предотвратить это? Спасибо.

Тег скрипта в моем index.html файле: 

<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>

Компонент 

const RequestADemo = () => {

  const [values, setValues] = useState({
    recaptcha_verified: false
  });

  const handleSubmit = (e) => {
    if (e) { e.preventDefault() };
    if (values.recaptcha_verified) {
      requestdemo();
    }
  };

  const handleChange = (e) => {
    e.persist();
    setValues((values) => ({ ...values, [e.target.name]: e.target.value }));
  };

  const requestdemo = () => {

    let firstname = values.firstname;

    fetch("/requestdemo", {
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ firstname })
    })
    .then((res) => res.json())
    .then((json) => {
      console.log("success");
    })
    .catch((err) => { console.log("err : ", err) });
  }

  const recaptchaVerified = (response) => {
    setValues({...values, recaptcha_verified: true });
  }

  return (
    <div>
      <form onSubmit={ handleSubmit }>
        <div className="field">
          <label className="label">First Name</label>
          <div className="control">
            <Input className="input" type="text" name="firstname" onChange={ handleChange } value={ values.firstname || "" } required />
          </div>
        </div>
        <Recaptcha
          sitekey="6Lxxxxxxxxxxxxxx"
          render="explicit"
          verifyCallback={recaptchaVerified}
        />
        <button type="submit" className="button is-block is-info is-fullwidth">Submit</button>
      </form>
    </div>
  );
};

export default RequestADemo;
...