Использование пользовательской кнопки для запуска @React-oauth/Google Googlelogin-ref Нажмите не работает ⇐ Javascript

[Anonymous]

Я пытаюсь интегрировать поток входа в систему Google в мое приложение React, используя компонент GoogleLogin из @React-OAuth/Google. Тем не менее, я хочу настроить пользовательский интерфейс, скрыв кнопку по умолчанию и вместо этого запустив поток входа в систему, используя мою собственную кнопку стиля. Чтобы достичь этого, я попытался использовать React Ref для доступа к скрытому контейнеру GoogleLogin и моделирования щелчка по базовому элементу. К сожалению, смоделированный клик, кажется, не запускает поток входа в систему Google.import { GoogleLogin } from '@react-oauth/google';

interface GoogleLoginButtonProps {
onSuccess: (data: any) => void;
onError: (error: any) => void;
}

const GoogleLoginButton = ({ onSuccess, onError }: GoogleLoginButtonProps) => {
// Create a ref to hold the hidden GoogleLogin container.
const hiddenLoginRef = useRef(null);

// This function simulates a click on the hidden GoogleLogin button.
const handleCustomClick = () => {
if (hiddenLoginRef.current) {
// Query for the underlying button element and trigger click.
const button = hiddenLoginRef.current.querySelector('div');
console.log(button);
if (button) {
button.click();
}
}
};

const handleSuccess = (credentialResponse: any) => {
onSuccess(credentialResponse);
};

const handleFailure = () => {
onError(new Error('Google login failed'));
};

return (

{/* Hidden GoogleLogin component */}



{/* Your custom button */}


Login with Google


);
};

export default GoogleLoginButton;
< /code>
Мои проблемы /вопросы: < /p>

Почему моделирование нажатия на запуск скрытого элемента /> Поток входа в систему Google? Используя
скрытые компоненты и синтетические клики, о которых я должен знать? Соображения безопасности или что скрытый элемент не является правильным нацеленным. Любые идеи, обходные пути или лучшие практики будут высоко оценены!

Подробнее здесь: https://stackoverflow.com/questions/794 ... ef-click-n