React【基础3】

项目创建

npx create-react-app

一、实现计算器效果

需要实现的效果

1、方法一

页面结构

index.js文件负责引入

import React from 'react'
import ReactDOM from 'react-dom'
import Count from './js/Count'

ReactDOM.render(<Count />,document.querySelector('#root'))

Count.js文件负责写代码逻辑

import React,{
   Component} from 'react';
export default class Count extends Component{
   
  state ={
   
    count:0
  }
  handleClick(){
   
    this.setState({
   
      count:this.state.count + 1
    })
  }
  render(){
   
    return(
      <div>
        <h4>计数器：{
   this.state.count}</h4>
        <button onClick={
   this.handleClick.bind(this)}>+1</button>
      </div>
    )
  }
}

2、方法二

使用了构造函数，在构造函数中改变了this指向

index.js文件负责引入

import React from 'react'
import ReactDOM from 'react-dom'
import Count from './js/Count'

ReactDOM.render(<Count />,document.querySelector('#root'))

Count.js文件负责写逻辑

import React,{
   Component} from 'react';
export default class Count extends Component{
   
  // 构造函数
  constructor(){
   
    super()  // 调用父类Component的构造函数
    this.handleClick = this.handleClick.bind(this)
  }
  state ={
   
    count:0
  }
  handleClick(){
   
    this.setState({
   
      count:this.state.count + 1
    })
  }
  render(){
   
    return(
      <div>
        <h4>计数器：{
   this.state.count}</h4>
        <button onClick={
   this.handleClick}>+1</button>
      </div>
    )
  }
}

3、方法三

在定义函数的时候改变this指向

index.js文件负责引入

import React from 'react'
import ReactDOM from 'react-dom'
import Count from './js/Count'

ReactDOM.render(<Count />,document.querySelector('#root'))

Count.js文件负责写逻辑

import React,{
   Component} from 'react';
export default class Count extends Component{
   
  state ={
   
    count:0
  }
  // 定义函数
  handleClick=()=>{
   
    this.setState({
   
      count:this.state.count + 1
    })
  }
  render(){
   
    return(
      <div>
        <h4>计数器：{
   this.state.count}</h4>
        <button onClick={
   this.handleClick}>+1</button>
      </div>
    )
  }
}