どのように反応n要素の回数をレンダリングする

Question

私は、ボタンをレンダリングしようとしていると、テキストの表示番号です。

たとえば、countが5の場合、<Button>1</Button>を<Button>5</Button>にしようとしています。

どのように反応させることができますか？

Answer 1

あなたはbutton内stateを表示することができます。、およびonClickイベントが

var Counter = React.createClass({ 
 
    getInitialState: function() { 
 
    return { counter: 0 }; 
 
    }, 
 
    \t 
 
    handleClick: function() { 
 
    this.setState({ counter: this.state.counter + 1 }); 
 
    }, 
 
    
 
    render: function() { 
 
    return <div> 
 
     <button onClick={ this.handleClick }>{ this.state.counter }</button> 
 
    </div> 
 
    } 
 
}); 
 

 
ReactDOM.render(<Counter />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"></div>