調用renderComponentToStaticMarkup時，使用react.js渲染onclick屬性

Question

讓我們說我有一個react組件，它將渲染到靜態html服務器端。 某些元素將具有react不會處理的onsubmit和onclick屬性，但仍應調用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屬性，未呈現
• 提供的componentDidMount可以在DOM節點上手動設置屬性，但是在呈現靜態標記時不會調用此屬性

Answer 1

onClick不接受字符串。 您需要將其傳遞給函數。 通常，您可以執行onClick={window.showRecaptcha.bind(null, recaptcha_id)} 。

當然，這不適用於renderComponentToStaticMarkup。 您必須使用JavaScript（外部或內嵌<script>標記）綁定事件，或者做一些駭人聽聞的事情，或者不使用react。 帶有addEventListener的<script>標記可能是此處的最佳解決方案。

超過5年以來，JavaScript字符串一直被認為是不良做法。 這包括onclick等在html，eval，帶有字符串的setTimeout / setInterval中，可能還有一些我忘記了。 即使渲染標記，也不是可行的方法。

Answer 2

我遇到了同樣的問題。 我的解決方案是危險地使用SetInnerHTML

 <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偵聽器