Cześć,
Próbuję dodać do strony React funkcjonalność abym mógł wysyłać dane do API gdzie "captcha": "string" (więc będzie tam przesyłany token.) Jest jednak problem mianowicie cały czas po wypełnieniu formularza i kliknięciu submita ("Wyślij") pojawia mi się info: "Proszę rozwiązać CAPTCHA!", a w konsoli nie pokazują mi się żadne błędy.
Będę bardzo wdzięczny za pomoc w rozwiązaniu problemu :)
Kod(Member.jsx):
import React, { useState, useEffect } from 'react';
import axios from 'axios';
...
import ReCAPTCHA from 'react-google-recaptcha'
const Member = () => {
...
const [captchaToken, setCaptchaToken] = useState('');
const validatePhoneNumber = (number) => {
const phoneRegex = /^[0-9]{9}$/;
return phoneRegex.test(number);
};
...
const handleCaptchaChange = (token) => {
console.log('Captcha token:', token);
setCaptchaToken(token);
};
const handleSubmit = async (event) => {
event.preventDefault();
if (!captchaToken) {
setNotification({ type: 'error', message: 'Problem z CAPTCHA' });
return;
}
if (!validatePhoneNumber(phone)) {
setNotification({ type: 'error', message: 'Numer telefonu powinien się składać z dokładnie 9 cyfr.' });
return;
}
....
const data = {
firstName,
lastName,
phone: parseInt(phone, 10),
....
captcha: captchaToken,
};
console.log(data);
try {
await axios.post('https://###, data, {
headers: {
'Content-Type': 'application/json',
'accept': 'application/json'
},
});
setNotification({ type: 'success', message: '...' });
setFirstName('');
setLastName('');
setPhone('');
....
} catch (error) {
setNotification({ type: 'error', message: '...' });
}
};
const closeNotification = () => {
setNotification({ type: '', message: '' });
};
const handleSelectAll = () => {
const newSelectAll = !selectAll;
setSelectAll(newSelectAll);
setTermsAccepted(newSelectAll);
...
};
const isFormValid = termsAccepted && ageConfirmed && dataProcessingAccepted && newsletterAccepted;
useEffect(() => {
}, [showConfetti]);
return (
<section className="section member">
<div className="container">
<h2 className="title">...</h2>
<form onSubmit={handleSubmit}>
<div className="row">
<input
type="text"
id="firstName"
className="form-control"
placeholder="Imię"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
required
/>
</div>
<div className="row">
<input
type="text"
id="lastName"
className="form-control"
placeholder="Nazwisko"
value={lastName}
onChange={(e) => setLastName(e.target.value)}
required
/>
</div>
...
<ReCAPTCHA
sitekey="..."
action="submit"
verifyCallback={handleCaptchaChange}
size="normal"
/>
<button
type="submit"
className={`btn btn-primary ${!isFormValid ? 'disabled' : ''}`}
disabled={!isFormValid}
>
Wyślij
</button>
</form>
</div>
...
</section>
);
};
export default Member;
