20201103-初学react(三)

函数绑定

在Rcc.js文件中写入
方法一

import React, {Component} from 'react';

export default class Rcc extends Component {
  constructor(props) {
    super(props);
    this.state = {
      str:'有状态组件'
    };
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>点4</button>
      </div>
    )
  }
  handleClick(){
    console.log(this.state.str)
  }
}

方法二

import React, {Component} from 'react';

export default class Rcc extends Component {
  constructor(props) {
    super(props);
    this.state = {
      str:'有状态组件'
    };
  }

  render() {
    return (
      <div>
        {/*通过bind改变this的指向,来获取str的值*/}
        {/*<button onClick={this.handleClick.bind(this)}>点4</button>*/}
        <button onClick={this.handleClick}>点5</button>
      </div>
    )
  }
  // handleClick(){
  //   console.log(this.state.str)
  // }
  handleClick=()=>{
    console.log(this.state.str)
  }
}

方法三

import React, {Component} from 'react';

export default class Rcc extends Component {
  constructor(props) {
    super(props);
    this.state = {
      str:'有状态组件'
    };
  }

  render() {
    return (
      <div>
        {/*通过bind改变this的指向,来获取str的值*/}
        {/*<button onClick={this.handleClick.bind(this)}>方法一</button>*/}
        {/*通过回调函数*/}
        {/*<button onClick={this.handleClick}>方法二</button>*/}
        <button onClick={()=>{this.handleClick()}}>方法三</button>
      </div>
    )
  }
  //方法一,方法三
  handleClick(){
    console.log(this.state.str)
  }
  //方法二
  // handleClick=()=>{
  //   console.log(this.state.str)
  // }
}

方法四

import React, {Component} from 'react';

export default class Rcc extends Component {
  constructor(props) {
    super(props);
    this.state = {
      str: '有状态组件'
    };
    this.handleClick = this.handleClick.bind(this)
  }

  render() {
    return (
      <div>
        {/*通过bind改变this的指向,来获取str的值*/}
        {/*<button onClick={this.handleClick.bind(this)}>方法一</button>*/}
        {/*通过回调函数*/}
        {/*<button onClick={this.handleClick}>方法二</button>*/}
        {/*通过箭头函数*/}
        {/*<button onClick={() => {this.handleClick()}}>方法三</button>*/}
        <button onClick={this.handleClick}>方法四</button>
      </div>
    )
  }

  //方法一,方法三
  handleClick() {
    console.log(this.state.str)
  }

  //方法二
  // handleClick=()=>{
  //   console.log(this.state.str)
  // }
}

this.setState的两种用法

方法一(不推荐)

import React, {Component} from 'react';

export default class Rcc extends Component {
  constructor(props) {
    super(props);
    this.state = {
      str: '有状态组件',
      count:0
    };
  }

  render() {
    return (
      <div>
        {this.state.count}
        <button onClick={this.handleClick}>+</button>
      </div>
    )
  }
  handleClick=()=>{
    this.setState({
      count:this.state.count+=1
    })
  }
}

方式二

import React, {Component} from 'react';

export default class Rcc extends Component {
  constructor(props) {
    super(props);
    this.state = {
      str: '有状态组件',
      count: 0
    };
  }

  render() {
    return (
      <div>
        {this.state.count}
        <button onClick={this.handleClick}>+</button>
      </div>
    )
  }

  handleClick = () => {
    this.setState((state) => {
      return {count: state.count += 1}
    })
  }
}

受控组件

有自己的state

方法一

import React, {Component} from 'react';

export default class Controlled extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handle}/>
      </div>
    )
  }

  handle = (e) => {
    this.setState((state) => {
      console.log(e.target.value)
      return {
        value:e.target.value
      }
    })
  }
}

方法2

import React, {Component} from 'react';

export default class Controlled extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handle}/>
      </div>
    )
  }

  handle = async (e) => {
    await this.setState({
      value:e.target.value
    },()=>{
      console.log(this.state.value)
    })
  }
}

非受控组件

没有自己state,value值一遍来源于父组件 value不能修改

方法一:已经不适用了

import React, {Component} from 'react';

export default class Uncontrolled extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <input type="text" value="非受控组件" onChange={() => {
        }} ref="inputRef"/>
        <button onClick={this.getValue}>getValue</button>
      </div>
    )
  }

  getValue = () => {
    console.log(this.refs.inputRef.value)
  }
}

方法二

import React, {Component, createRef} from 'react';

export default class Uncontrolled extends Component {
  constructor(props) {
    super(props);
    this.inputRef=createRef()
  }

  render() {
    return (
      <div>
        <input type="text" value="非受控组件" onChange={()=>{}} ref={this.inputRef}/>
        <button onClick={this.getValue}>getValue</button>
      </div>
    )
  }

  getValue = () => {
    console.log(this.inputRef.current.value)
  }
}

极简版购物车

效果

代码

import React, {Component} from 'react';

export default class carts extends Component {
  constructor(props) {
    super(props);
    this.add = this.add.bind(this)
    this.reduce = this.reduce.bind(this)
    this.state = {
      allPrice: 0,
      carts: [
        {
          id: 1,
          name: '足球',
          count: 0,
          price: '25',
          total: 0
        }, {
          id: 2,
          name: '篮球',
          count: 0,
          price: 125,
          total: 0
        }, {
          id: 3,
          name: '篮球场',
          count: 0,
          price: 520,
          total: 0
        }
      ]
    };
  }

  add(e) {
    this.state.carts.map(items => {
        if (items.id === Number(e.target.dataset.id)) {
          items.count++
          items.total = items.count * items.price
        }
        return items
      }
    )
    this.setState({})
    this.getAllPrice()
  }

  reduce(e) {
    this.state.carts.map(items => {
        if (items.count <= 0) return
        if (items.id === Number(e.target.dataset.id)) {
          items.count--
          items.total = items.count * items.price
        }
        return items
      }
    )
    this.setState({})
    this.getAllPrice()
  }

  getAllPrice() {
    let cou = 0;
    this.state.carts.forEach(item => {
      cou += item.count * item.price
    })
    this.setState({
      allPrice: cou
    })
  }

  render() {
    return (
      <div>
        {this.state.carts.map(items => {
            return (
                <ul>
                  <li key={items.id}>
                    {items.name}单价:￥{items.price}
                    <button onClick={this.reduce} data-id={items.id}>-</button>
                    <span>{items.count}</span>
                    <button onClick={this.add} data-id={items.id}>+</button>
                    {items.total}
                  </li>
                </ul>
            )
          })
        }
        <h1>{this.state.allPrice}</h1>
      </div>
    )
  }
}