如何在reactjs中使用按钮onClick?

如何在reactjs中使用按钮onClick?,reactjs,Reactjs,我是新手。我试图在组件的帮助下将我现有的网站复制成reactjs。我有一些html代码,可以触发javascript函数来执行该操作。如何将其更改为reactjs。下面是代码 HTML: 我已经在reactjs类的render函数中编写了所有这些HTML代码 class Index extends Component { render() { return( <div className="tabs-content">

我是新手。我试图在组件的帮助下将我现有的网站复制成reactjs。我有一些html代码,可以触发javascript函数来执行该操作。如何将其更改为reactjs。下面是代码

HTML: 我已经在reactjs类的render函数中编写了所有这些HTML代码

class Index extends Component {
  render() {
return(
                  <div className="tabs-content">
                    <div id="login-tab-content" className="active">
                      <iframe
                        align="left"
                        frameBorder="0"
                        scrolling="no"
                        width="300"
                        height="180"
                        name="dc_login_iframe"
                        id="dc_login_iframe"
                        src="https://login.doccheck.com/code/12345/de/m_red//"
                      >
                        <a
                          href="https://login.doccheck.com/code/12345/de/m_red/"
                          target="_blank"
                        >
                          LOGIN
                        </a>
                      </iframe>
                    </div>

                    <div className="signup-tab-content">
                      <form className="signup-form" action="" method="post">
                        <label>
                          <input
                            type="radio"
                            name="test"
                            value="small"
                            checked
                          />
                        </label>
                        <label>
                          <input type="radio" name="test" value="big" />
                        </label>
                        <input
                          type="submit"
                          className="button"
                          value="Sign Up"
                        />
                      </form>
                    </div>
                  </div>
);}

由于我已经将html代码放在了render函数中,我应该将JS代码放在哪里?

在render方法中的html元素上使用
onClick={this.clicked.bind(this)}
属性


然后在你的类索引中创建一个名为“clicked的新方法,该方法使用你的js文件的逻辑。我已经有了。这就是我来这里的原因。我是新手,因此我无法理解如何更改一个类的活动状态。更改状态?同样,它已经存在于文档中。在尝试将任何内容转换为React之前,至少您应该阅读其官方文档。没有人能提出任何建议,除非你展示一些代码,说明你是如何尝试它的,以及你在哪里卡住了。您可以保留活动项的状态,并根据此状态有条件地更改类。不要试图像在Jquery中那样思考。
// LOGIN TABS
$(function() {
  var tab = $(".tabs h3 a");
  tab.on("click", function(event) {
    event.preventDefault();
    tab.removeClass("active");
    $(this).addClass("active");
    tab_content = $(this).attr("href");
    $('div[id$="tab-content"]').removeClass("active");
    $(tab_content).addClass("active");
  });
});