Question

我只需要一个按钮就可以一件一件地做两件事。我有两个按钮“Обучить”和“Генерировать”，它们都可以执行onClick操作。一个按钮就能完成所有操作吗？

<Button
    variant="contained"
    color="primary"
    style={{
        background:
            "linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)"
    }}
    onClick={this.parseInput}
>
    Обучить
</Button>

<Button
    variant="contained"
    color="primary"
    style={{
        background:
            "linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)"
    }}
    onClick={() => {
        this.props.updateData(this.state.filterArray);
    }}
>
    Генерировать
</Button>

Answer 1

当然可以。您可以使用变量来决定要对onClick函数执行什么操作

onClick={() => {
   if(this.props.type == 'update')
      this.props.updateData(this.state.filterArray);
   else
      this.parseInput()
}}

您可以使用相同的属性type（或您喜欢的任何东西）来呈现不同的标签

{{this.props.type=='update'? 'Генерировать': 'Обучить'}}

Answer 2

例如，如果我对您的理解正确，那么您想使用相同的组件，但是让它们做不同的事情。

这是如何做到这一点的例子。

import React from 'react';

const Button = ({onClick}) => {
  return (
    <button
      onClick={onClick}
    >
      Click on me
    </button>
  )
}

export default Button;

因此，当您要将方法传递给按钮时，可以这样做。

import Button from './button';

clickerTicker() {
  alert("First method, clickerticker");
}

secondaryClick() {
  alert("Second method yo");
}

render() {
  return (
      <div>
        <ButtonComponent onClick={this.clickerTicker.bind(this)}/>
        <br/>
        <ButtonComponent onClick={this.secondaryClick.bind(this)}/>
      </div>
  );
}

只需将onClick传递给组件

Answer 3

我假设您要使组件可重用？在这种情况下，您可能希望像这样设计组件。

const NewButton = ({onClick, children}) => (
  <Button 
    variant="contained"
    color="primary"
    style={{
      background: "linear-gradient(45deg, #00ACD3 30%, #00BE68)
    }}
    onClick={onClick}>
      children
  </Button>);

然后您上面的剪裁变为

<NewButton onClick={someFunction}>Something</NewButton>
<NewButton onClick={otherFunction}>Something</NewButton>

这是任何基于组件的前端框架背后的基本思想，我建议您访问react教程以了解更多信息。否则，那里的话题很多articles很好

如何减少按钮数量？

3 个答案: