【taro react】 ---- Stepper 步进器组件封装

2022-01-06 16:49:28 浏览数 (2)

1.目的

  1. 学会 taro 组件的封装；
  2. 学习 【Stepper 进步器】的基础逻辑；
  3. 学会 react 组件调用值的传递！

2. 【Stepper 进步器】组件布局

2.1 预览样式
2.2 布局结构代码
  1. 使用 flex 布局，作为进步器的盒子，注意由于个人习惯，基本采用的 flex 布局，rui-fa 是 flex: none 防止盒子发生错乱；
  2. 【rui-icon rui-icon-minus】减号；
  3. 【rui-icon rui-icon-plus】加号；
  4. 【rui-color4 rui-fs30 rui-ml15】图标的颜色大小和左边距；
  5. input 是 进步器 的输入盒子，可以编辑修改 value。
代码语言：javascript复制
import React, { Component } from 'react'
import { View, Text, Input } from '@tarojs/components'
import './index.scss'


export default class RuiStepper extends Component {
  constructor(props) {
    super(props)
  }
  render () {
    return (
      <View className='rui-flex-ac rui-fa'>
        <Text className='rui-icon rui-icon-minus rui-color4 rui-fs30 rui-ml15'></Text>
        <Input className='rui-stepper-input'></Input>
        <Text className='rui-icon rui-icon-plus rui-color4 rui-fs30 rui-mr15'></Text>
      </View>
    )
  }
}

3. 【Stepper 进步器】传入参数赋值

  1. 传入的 默认 value 进行渲染显示；
  2. 传入的 min / max 需要事件触发进行判断处理。
代码语言：javascript复制
export default class RuiStepper extends Component {
  constructor(props) {
    super(props)
  }
  render () {
    let { value = 1 } = this.props
    return (
      <View className='rui-flex-ac rui-fa'>
        <Text className='rui-icon rui-icon-minus rui-color4 rui-fs30 rui-ml15'></Text>
        <Input className='rui-stepper-input' value={value}></Input>
        <Text className='rui-icon rui-icon-plus rui-color4 rui-fs30 rui-mr15'></Text>
      </View>
    )
  }
}

4. 【Stepper 进步器】输入事件触发处理

  1. input 失去焦点获取输入的 value；
  2. 获取传入的 max 和 min 的值，如果没有，默认 1000 和 1；
  3. 对输入的 value 去掉非数字项【注意：此处没有考虑浮点数情况】；
  4. 三目表达式处理 value 的值，value 在 最大值 max 和 最小值 min 之间，就使用value本身，否则大于max使用max，小于min使用min；
  5. 将最后的 value 传递出去。
代码语言：javascript复制
getValue(e){
   let { value } = e.detail
   let { max = 1000, min = 1 } = this.props
   value = value.replace(/[^d]/g, '')
   value = value < min ? min : value > max ? max : value
   this.props.changeValue(value)
 }

5. 【Stepper 进步器】点击加减号触发处理

  1. 获取传入的 max 和 min 的值，如果没有，默认 1000 和 1；
  2. 判断点击的是加号还是减号；
  3. 加号，判断加1是否小于等于最大值，满足就加1；
  4. 减号，判断减1是否大于最小值，满足减1；
  5. 注意此处进步器的步长都是1；
  6. 最后使用value本身；
  7. 将最后的 value 传递出去。
代码语言：javascript复制
handleStep(value, type){
  let { max = 1000, min = 1 } = this.props
  value = type == ' ' && value   1 <= max ? value   1 : type == '-' && value - 1 > min ? value - 1 : value
  this.props.changeValue(value)
}

6. 【Stepper 进步器】阻止事件冒泡

代码语言：javascript复制
<View className='rui-flex-ac rui-fa' onClick={(e) => e.stopPropagation()}></View>

7. 完整代码

代码语言：javascript复制
import React, { Component } from 'react'
import { View, Text, Input } from '@tarojs/components'
import './index.scss'


export default class RuiStepper extends Component {
  constructor(props) {
    super(props)
  }
  // 操作对值的加减操作
  handleStep(value, type){
    let { max = 1000, min = 1 } = this.props
    value = type == ' ' && value   1 <= max ? value   1 : type == '-' && value - 1 > min ? value - 1 : value
    this.props.changeValue(value)
  }
  // 获取输入值的操作
  getValue(e){
    let { value } = e.detail
    let { max = 1000, min = 1 } = this.props
    value = value.replace(/[^d]/g, '')
    value = value < min ? min : value > max ? max : value
    this.props.changeValue(value)
  }
  render () {
    let { value } = this.props
    return (
      <View className='rui-flex-ac rui-fa' onClick={(e) => e.stopPropagation()}>
        <Text className='rui-icon rui-icon-minus rui-color4 rui-fs30 rui-ml15' onClick={this.handleStep.bind(this, value, '-')}></Text>
        <Input className='rui-stepper-input' value={value} onBlur={this.getValue.bind(this)}></Input>
        <Text className='rui-icon rui-icon-plus rui-color4 rui-fs30 rui-mr15' onClick={this.handleStep.bind(this, value, ' ')}></Text>
      </View>
    )
  }
}

8. 组件使用

  1. 引入【Stepper 步进器】组件；
  2. 界面使用；
代码语言：javascript复制
import React, { Component } from 'react'
import { View, Text, Input } from '@tarojs/components'
import RuiStepper from '../RuiStepper/RuiStepper'

export default class RuiGoodsLi extends Component {
  constructor(props) {
    super(props)
  }
  changeValue(value){
    let { index = 0, idx = 0, list } = this.state
    list[index].buy[idx].GoodsNum = value
    this.setState({list})
  }
  render () {
    let { value = 1 } = this.props
    return (
      <View>
        <RuiStepper changeValue={this.changeValue.bind(this)} value={goods.GoodsNum}/>
      </View>
    )
  }
}

9. 预览

flex icon input max min

0 人点赞