私はReact.jsによってレンダリングされたhtml要素の内容をonClickを使って変更しようとしています。しかし、このコードは動作していないようです

Question

ここに私のコードです。 className "para"のparaは変更されません。どのように機能が呼び出されているかどうかを確認するには？

var Banner = React.createClass({ 
    onBannerClick : function(){ 
     document.getElementsByClassName('para').innerHTML = "Clicked it"; 
    }, 
    render:function(){ 
    return(
    <p className='para' onClick={this.onBannerClick}>Click this</p> 
    ) 
    } 
    }); 
    ReactDOM.render(<Banner/>, 
    document.getElementById('atom') 
) 

Answer 1

反応では、DOMを直接変更しないでください。あなたは、モデル（小道具や状態を変更し、新たなモデルを反映するためにコンポーネントを再レンダリング反応：。

var Banner = React.createClass({ 
    onBannerClick: function(){ // change the model 
     this.setState({ 
      clicked: !this.state.clicked 
     }); 
    }, 
    render:function(){ 
     return(
      <p onClick={this.onBannerClick}> 
       { 
        this.state.clicked && "Clicked it" // according to the model the text is displayed or not 
       } 
      </p> 
     ) 
    } 
}); 

ReactDOM.render(<Banner/>, 
    document.getElementById('atom') 
); 

Answer 2

をしかし、このコードは

var Banner = React.createClass({ 
    onBannerClick : function(){ 
     document.getElementsByClassName('para').innerHTML = "Clicked it"; 
    }, 
    render:function(){ 
    return(
    <p className='para' onClick={this.onBannerClick}>Click this</p> 
    ) 
    } 
    }); 
    ReactDOM.render(<Banner/>, 
    document.getElementById('atom') 
)