javascript - react 按钮不会弹出链接页面

Question

单击按钮时，会在新选项卡中打开一个空白页面。我希望能够单击并获取新选项卡以打开显示的不同站点。

我发现像下面这样的链接是有效的:

btnClick() {
        window.open("https://www.google.com");
    } 
....................
<ButtonComponent cssClass='e-link' onClick={this.btnClick.bind(this)}>Go to google</ButtonComponent>

<小时/>

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
class App extends React.Component {
    // Click Event.
    btnClick() {
        window.open();
    }
    render() {
        return (<div>
                <ButtonComponent cssClass='e-link' onClick={this.btnClick.bind("https://www.google.com")}>Go to google</ButtonComponent>
            </div>);
(<div>
                <ButtonComponent cssClass='e-link' onClick={this.btnClick.bind("https://www.yahoo.com")}>Go to yahoo</ButtonComponent>
            </div>);
    }
}
ReactDom.render(<App />, document.getElementById('button'));

<小时/>

没有错误，只是没有链接到预期的网站。

Answer 1

我相信您错误地使用了bind。您不在bind 中传递函数参数，要在onClick() 中传递带参数的函数，您可以使用箭头函数。尝试以下代码:

import { enableRipple } from "@syncfusion/ej2-base";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import * as React from "react";
import * as ReactDom from "react-dom";
enableRipple(true);
class App extends React.Component {
  constructor(props) {
    super(props)
    this.btnClick = this.btnClick.bind(this)
  } 

  btnClick(url) {
    window.open(url);
  }
  render() {
    return (<div>
      <ButtonComponent cssClass='e-link' onClick={() => this.btnClick("https://www.google.com")}>Go to google</ButtonComponent>
    </div>);
  }
}
ReactDom.render(<App />, document.getElementById("button"));