1

我正在创建一个反应项目并使用谷歌搜索引擎允许用户在我的页面中搜索谷歌。但我不知道如何获取用户在搜索结果页面上点击的内容。下面是我的源代码：

componentDidMount() {
    const myCallback = function() {
      if (document.readyState === 'complete') {
        google.search.cse.element.render(
          {
            div: 'root',
            tag: 'search',
          });
      } else {
        google.setOnLoadCallback(() => {
          google.search.cse.element.render(
            {
              div: 'root',
              tag: 'search',
            });
        }, true);
      }
    };

    window.__gcse = {
      parsetags: 'explicit',
      callback: myCallback,
    };

    (function() {
      const cx = '015923670062127816633:npuitytcpqy';
      const gcse = document.createElement('script');
      gcse.type = 'text/javascript';
      gcse.async = true;
      gcse.src = `https://cse.google.com/cse.js?cx=${cx}&searchType=image`;
      // gcse.src = `https://www.googleapis.com/customsearch/v1?key=YOUR_API_KEY&cx=${cs}&q=flower&searchType=image&fileType=jpg&imgSize=small&alt=json`;
      const s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(gcse, s);
    }());
    console.log(window.__gcse);
  }

  render() {
    return (<div className="content">
      <div className="gcse-searchbox" resultsUrl="http://www.google.com" newWindow="true" queryParameterName="search" />
    </div>);
  }

用户可以在搜索框中进行搜索，它会在弹出的对话框中显示搜索结果。如果用户单击其中一个搜索结果，它将打开一个新的浏览器标签。现在我想阻止打开一个新标签，而是获取用户点击的内容并在我的页面中执行某些操作。例如，如果用户单击图像，我想获取图像链接并将此图像呈现在我的组件上。我如何通过反应来实现它？

4

1 回答 1

0

首先，访问 Google 自定义搜索控制面板。选择相关搜索引擎后，点击Look and feel。确保选择了布局选项卡，然后选择全角布局（或者可能是其他布局之一，具体取决于您希望它在页面上的外观）。最后，单击Save & Get Code并使用它提供的代码。

于 2017-10-25T07:06:49.513 回答