javascript - React 中渲染的 HTMl 中的可点击按钮

Question

我有一个 React 应用程序。在我的页面中，我从数据库中获取了一篇文章内容。我想检查一下，如果帖子内容对象有 flag: 'wating_for_accept'，那么用户会看到可以点击该按钮的按钮，并且 verifyIt 功能会被触发。

check_accepted_or_not(){
  if(this.post.flag == 'wating_for_accept'){
    render (<div> <Button onClick={this.verifyIt()}> Verify </Button> </div>);
  }else{
    return '';
  }
}

verifyIt(){
  console.log('Vefiry function has been triggered');
}

render() {
  return (
    <h1>{this.post.title}</h1>
    {this.check_accepted_or_not}
  )
}

问题是当函数 check_accepted_or_not 渲染按钮时，按钮的 onClick Action 不起作用!

Answer 1

您需要传入函数的引用，而不是执行它。考虑到这个沙箱和下面的代码:https://codesandbox.io/s/blissful-khorana-v5tfl

工作代码:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component{
 
  check_accepted_or_not(){
    if(this.props.post.flag == 'wating_for_accept'){
      return (<div> <button onClick={this.verifyIt} > Verify </button> </div>);
    }else{
      return '';
    }
  }

  verifyIt(){
    console.log('Vefiry function has been triggered');
  }

  render() {
    return (
      <div>
      <h1>{this.props.post.title}</h1>
      {this.check_accepted_or_not()}
      </div>

    )
  }
}

App.defaultProps = {
  post: {
    title: "My Post",
    flag: "wating_for_accept"
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);