Question

我是Reactjs的新手。我正在尝试借助组件将现有网站的副本复制到reactjs中。我有一些触发javascript函数执行操作的html代码。如何将其更改为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>
);}

JS如下 Javascript：

// 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");
  });
});

我已经将html代码放入了render函数中，应该在哪里放置JS代码？

Answer 1

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

然后在您的类索引中使用您的js文件的逻辑创建一个名为clicked的新方法

如何在reactjs中使用按钮onClick？

1 个答案: