1.2 增加一個新的react組件

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import ClickCounter from './ClickCounter';
import registerServiceWorker from './registerServiceWorker';
import './index.css';

ReactDOM.render(<ClickCounter />, document.getElementById('root'));
registerServiceWorker();

src/ClickCounter.js

import React,{Component} from 'react';
class ClickCounter extends Component{
  constructor(props){
    super(props);
    this.onClickButton = this.onClickButton.bind(this);
    this.state = {count:0};
  }
onClickButton(){
  this.setState({count:this.state.count+1});
}

render(){
  return(
    <div>
      <button onClick ={this.onClickButton}> Click Me</button>

    <div>
      Click Count:{this.state.count}
    </div>
    </div>
  );
}
}

export default  ClickCounter;
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章