Как я могу получить свой пользовательский ввод Google в своем приложении реагирования? - PullRequest
Новая
       78

Как я могу получить свой пользовательский ввод Google в своем приложении реагирования?

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

Я использую пользовательский поиск Google в своем приложении React:

http://www.assertivesolutions.ca

Я хочу изменить заполнитель по умолчанию «Пользовательский поиск» на скажи что-нибудь еще. Кажется, нет способа сделать это с CSS, поэтому я пытаюсь получить его в Javascript. У меня есть это в хуке componentDidMount (): 

componentDidMount() {
    if (this.props.methodType === 'search') {
        const searchInput = document.querySelector('#gsc-i-id1');
        console.log('componentDidUpdate: ', searchInput);
    }
}

Он выводит ноль на консоль, что означает, что он ничего не получил из DOM.

Я не уверен как пользовательский поиск Google внедряет панель поиска на страницу, но она кажется асинхронной. Поэтому я не могу рассчитывать на то, что он будет готов к моменту запуска componentDidMount (). Но, насколько я знаю, componentDidMount - это последний хук, который срабатывает при загрузке страницы.

Итак, мой вопрос: как мне узнать, когда пользовательский поиск Google готов (то есть доступен в DOM)? И есть ли какой-нибудь крючок, который я могу использовать, чтобы схватить его?

Спасибо.

Вот полный компонент: 

import React, { Component } from 'react';
import '../../App.scss';
import './ContactMethod.scss';
// eslint-disable-next-line
import callUsIcon from '../../assets/images/call-us-icon.png';

class ContactMethod extends Component {

componentDidMount() {
    if (this.props.methodType === 'search') {
        const searchInput = document.querySelector('#gsc-i-id1');
        console.log('componentDidUpdate: ', searchInput);
    }
}

render() {
    // Figure out which contact method this is:
    let methodTypeName = '';
    let methodTypeValue = '';
    let icon = '';
    switch (this.props.methodType) {
        case 'phone':
            methodTypeName = 'Call Us';
            methodTypeValue = '403-999-4951';
            icon = require('../../assets/images/call-us-icon.png');
            break;
        case 'email':
            methodTypeName = 'Email Us';
            methodTypeValue = 'support@assertivesolutions.ca';
            icon = require('../../assets/images/email-us-icon.png');
            break;
        case 'search':
            methodTypeName = 'Search';
            methodTypeValue = 'Enter search here...';
            icon = require('../../assets/images/search-icon.png');
            break;
        // need default case
    }

    // If this is search, we want an input field:
    var valueElement = <span className="contact-method-value">{ methodTypeValue }</span>;
    if (this.props.methodType === 'search') {
        valueElement = <div className="gcse-search" /> // <-- here
    }

    // Return the component:
    return (
        <div className="contact-method flex-row-space-between">
            <div className="flex-column-center">
                <img src={ icon } alt="{ icon }" />
            </div>
            <div className="name-and-value flex-column-space-around">
                <span className="contact-method-name">{ methodTypeName }</span>
                { valueElement } // <-- and here
            </div>
        </div>
    );
}
}

export default ContactMethod;
...