Я пытался использовать API recapcha, потому что я не хотел, чтобы кто-то получал боты и отправлял сообщения на сайт форума, у пользователей по умолчанию максимум 3 сообщения, тогда им приходится платить больше, поэтому я не уверен, что это даже реальная угроза (я новый разработчик), я создал следующий компонент и надеюсь, что смогу получить совет, если я правильно использую API или если мне даже нужно использовать его на сайте, я понятия не имею, что на самом деле угрозы существуют ...
API: https://www.npmjs.com/package/react-google-recaptcha код: https://codesandbox.io/s/clever-breeze-nevll
const App = () => {
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [allowSubmit, setAllowSubmit] = useState(false);
const onChange = value => {
console.log("Captcha value:", value);
setAllowSubmit(true);
};
const onSubmit = event => {
event.preventDefault();
console.log(
`Your first name is ${firstName} , your last name is ${lastName}`
);
setAllowSubmit(false);
};
return (
<form onSubmit={onSubmit}>
<label htmlFor="first name"> firstName </label>
<input
placeholder="enter your first name"
onChange={event => setFirstName(event.target.value)}
/>
<br />
<label htmlFor="first name"> lastName </label>
<input
placeholder="enter your last name"
onChange={event => setLastName(event.target.value)}
/>
<br />
<ReCAPTCHA
sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
onChange={onChange}
/>
<button disabled={!allowSubmit}> Submit </button>
</form>
);
};