Question

让我们说我有一个反应组件将呈现给静态html服务器端。某些元素将具有onsubmit和onclick属性，这些属性不会被react处理，但仍应调用javascript函数。在这种特殊情况下，我想生成一个联系表单服务器端，但客户端需要加载recaptcha：

var contactForm = React.createClass({
  render: function() {
    var recaptcha_id = "recaptcha_div";
    return(
        <div className="contact pure-form">
          <h4 className="boxedTitle">Contact Form</h4>
          <form key="form" method="POST" action=".">
          <fieldset key="sender_email">
            <label>Email</label>
            <input name="sender_email" placeholder="Your Email" type="email" />
          </fieldset>
          <fieldset key="subject">
            <label>Subject</label>
            <input name="subject" placeholder="Subject" type="text" />
          </fieldset>
          <fieldset key="message">
            <label>Message</label>
            <textarea name="message" placeholder="Message"/>
          </fieldset>
          <fieldset key="humanity">
            <div id={recaptcha_id}></div>
            <input ref="captcha_btn" type="button" value="Show reCAPTCHA" onClick={"showRecaptcha('"+recaptcha_id+"');"}></input>
          </fieldset>
          <fieldset key="submit">
            <input type="submit" className="btn btn-primary" value="Send"/>
          </fieldset>
          </form>
        </div>
    )
  }
});

console.log(React.renderComponentToStaticMarkup(contatForm()))

但是没有渲染onClick。我尝试了一些其他不起作用的东西：

尝试了onclick属性，未呈现
提供了在DOM节点上手动设置属性的componentDidMount，但在呈现静态标记时没有调用

Answer 1

onClick不接受字符串。你需要传递一个函数。通常，您可以onClick={window.showRecaptcha.bind(null, recaptcha_id)}。

当然，这不适用于renderComponentToStaticMarkup。您必须使用JavaScript（外部或内联<script>标记）绑定事件，或做一些hacky，或不使用react。带有addEventListener的<script>标签可能是最好的解决方案。

现在，JavaScript字符串被认为是一种不好的做法已有5年多了。这包括onclick等在html，eval，setTimeout / setInterval中的字符串，可能还有一些我忘了。即使在渲染标记时，也不是可行的方法。

Answer 2

我遇到了同样的问题。我的解决方案是使用dangerouslySetInnerHTML

 <td dangerouslySetInnerHTML={{__html: `
    <button onClick="alert('hello')" >Detalii</button>
  `}} 
 />

希望它有所帮助，

Answer 3

我遇到了同样的问题，因为我在渲染组件后将JS插入到DOM中。我用之前答案中的一些线索解决了这个问题，然后想出了这个：

wrapper_function(){
   //function i want in my onclick attribute
   window.myFunc();
}
render() {

   return(
      <img className="openbtn" onClick={this.wrapper_function.bind(this)} src="..."/>

实际上，更简单的方法就是在客户端JS中分配onclick监听器

在调用renderComponentToStaticMarkup时使用react.js渲染onclick属性

3 个答案: