taro - 元件自定義事件方法傳遞

• 父元件 Paylist

  直接上代碼，就不分析了。

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtNavBar } from 'taro-ui'
import Clist from '../../components/pay/paylist/Clist.jsx'
import './paylist.scss'

export default class Paylist extends Component {

  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  config = {
    navigationBarTitleText: ''
  }
  handleClick() {
    Taro.navigateBack()
  }
  btClickEvent = (e) =>{
     
    console.log('paylist btonclick 目标繳費編号>>'+e)
  }

  render() {
    return (
      <View style='background-color: #ffffff;'>
 
        <AtNavBar
          onClickRgIconSt={this.handleClick}
          onClickRgIconNd={this.handleClick}
          onClickLeftIcon={this.handleClick}
          color='#6190E8'
          title='待繳費清單'
          leftText='傳回'
          fixed='true'
          leftIconType='chevron-left'
        />


        <View style='padding-top:30px'>
          <View className='paylist' >            
            <Clist aaa='QQ2' hisPayId='his11111' onPayClick={this.btClickEvent}></Clist>
          </View>
          <View className='paylist'>
            <Clist hisPayId='his12222'  onPayClick={this.btClickEvent}  ></Clist>
          </View>
          <View className='paylist'>
            <Clist></Clist>
          </View>
          <View className='paylist'>
            <Clist></Clist>
          </View>
        </View>

      </View>

    )
  }
}

           

• 子元件 Clist

import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import { AtCard } from "taro-ui"
import { ClButton } from "mp-colorui";
import paytag from '../../../asset/images/base/paytag.png'
import './Clist.scss'

class Clist extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hispayid: 0
    }

  }
  config = {
    navigationBarTitleText: ''
  }

  state = {}

  componentWillMount() { }
  componentDidMount() { }
  componentWillUnmount() { }
  componentDidShow() { }
  componentDidHide() { }
  componentDidCatchError() { }
  componentDidNotFound() { }
  goToPay() {
    try {
       this.props.onPayClick(this.state.hispayid) 
      }
    catch (e) { 
      console.log('處理父事件異常')
     }

  }
  render() {
    this.setState({
      hispayid: this.props.hisPayId
    })
    return (
      <View className='Clist'>
        <AtCard
          note='訂單日期: 2020-3-26'
          extra='呼吸科'
          title={'編号:' + this.state.hispayid}
          thumb={paytag}
        >
          <View className='at-row at-row__justify--between'  >
            <View className='at-col at-col-9' style='font-size:18px'>金額：23.5 元 {this.props.aaa}</View>
            <View className='at-col at-col-3' onClick={this.goToPay}>
              <ClButton shape='round' bgColor='green' >點我支付</ClButton>
            </View>
          </View>
        </AtCard>
      </View>
    );
  }
}
export default Clist;