时间戳

首页 > 解决方案 > React 中渲染的 HTML 内的可点击按钮

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

问题描述

我有一个反应应用程序。在我的页面中，我从数据库中获取帖子内容。我想检查如果帖子内容对象有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动作不起作用！

标签： javascriptreactjsjsx

解决方案

您需要传入对该函数的引用，而不是执行它。考虑下面这个沙箱和代码：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);

推荐阅读