Question

以下代码的第一次单击事件是相同的，我想知道wwhich方法可以用来组合它们并使我的代码更简洁。

<Button onClick={()={this.setState({disable:true});increasePostsVote(post);}}
><i className="fa fa-thumbs-o-up fa-lg"/> </Button>
<Button onClick={()={this.setState({disable:true});decreasePostsVote(post);}}
><i className="fa fa- thumbs-o-down fa-lg"/> </Button>

Answer 1

看起来你正在分享A）大部分组件标记，以及B）'点击'逻辑时禁用设置状态。

您可以抽象FaButton组件和disable()函数来使事情变得更漂亮：

function FaButton({ faIconClass, onClick }) {
  return (
    <Button onClick={onClick}>
      <i className={`fa ${faIconClass} fa-lg`} />
    </Button>
  );
}

const disable = () => setState({ disable: true });

   // Now your code 
   <FaButton faIconClass="fa-thumbs-o-up" onClick={() => disable(); increasePostsVote(post);} />
   <FaButton faIconClass="fa-thumbs-o-down" onClick={() => disable(); increasePostsVote(post);} />

将FaButton分解出大部分表示逻辑，并在onClick中处理业务逻辑。希望这有帮助！

如何使用react结合两个按钮

1 个答案: