Question

我在下面创建了一个反应按钮组件...代码：

import React from 'react';

const style = {
  button: {
    backgroundColor: '#000000',
    color: '#ffffff',
    padding: '12px',
    textAlign: 'center',
    marginTop: '20px'
  }
};

export class Button extends React.Component {

  render() {

    return (
      <div className="btn" style={style.button}>Button Text Here</div>

    );
  }
}


//Show Button

<Button />

我有一个React Button组件（上面的代码）。

我需要做的是创建一个名为Type或ButtonType的属性。

假设我们有2种类型＆＃34;导航＆＃34;并且＆＃34;提交＆＃34;。

我希望能够使用 onClick 事件更改按钮的功能，具体取决于按钮类型。

因此，如果类型是提交，它将像提交一样，如果是类型导航，它将链接到另一个页面。

可以这样做吗？这样做是好的做法吗？

Answer 1

你可以这样做

export class Button extends React.Component {

  handleClick() { 
    const { type } = this.props;
    if (type === 'submit') { 
      // submit
    } else if (type === 'navigation') { 
      // navigate
    }
  }

  render() {
    return (
      <div 
        className="btn" 
        style={style.button}
        onClick={this.handleClick.bind(this)}
      >
       Button Text Here
      </div>
    );
  }
}

然而，我会避免使用这种方法并创建两个单独的按钮来呈现主<Button />，而是单独执行它们的逻辑。

React Component onClick取决于prop类型

1 个答案: