【避坑指“难”】Taro跨多端开发,小程序报错:MiniProgramError Super expression must either be null or a function

14 篇文章 0 订阅
3 篇文章 0 订阅

小程序开发工具的控制台报错:

MiniProgramError onchange is not defined
ReferenceError: onchange is not defined

如下图:

在这里插入图片描述
代码如下:

index.jsx

import Taro  from '@tarojs/taro'
import React, { Component } from 'react'
import { View, Text ,Button} from '@tarojs/components'
import './index.less'
import Child from './Child'

export default class Index extends Component {
  config={
    navigationBarTitleText:'首页'
  }
  state={
    name:'张三'
  }
  componentWillMount () { }

  componentDidMount () { 
    //this.setState({name:"李四"})
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  click(){
    this.setState({name:'李四'},()=>{
      console.log(this.state.name)
    });
  }
  change(){
    this.setState({name:"改变name值"})
  }
  render () {
    return (
      <View className='index'>
        <Child name={this.state.name} onchange={this.change.bind(this)}/>
        <Button onClick={this.click}>改变名字</Button>
        <Text>{this.state.name}</Text>
      </View>
    )
  }
}

Child.jsx

import Taro from '@tarojs/taro';
import {View,Text,Button} from "@tarojs/components";

class Child extends Component{
    clickHandle(){
        this.props.onchange()
    }
    render(){
    return(<View>
        <Button onClick={this.clickHandle}>调用上层事件</Button>
        {this.props.name}
        </View>)
    }
}
Child.defalutProps={
    name:"123",
    onchange
}
export default Child;

对上面代码稍作修改:

Child.jsx

import React, { Component } from 'react'
import {View,Text,Button} from "@tarojs/components";

class Child extends React.Component{
    clickHandle(){
        this.props.onchange()
    }
    render(){
    return(<View>
        <Button onClick={this.clickHandle}>调用上层事件</Button>
        {this.props.name}
        </View>)
    }
}
Child.defalutProps={
    name:"123",
    onchange:null
}
export default Child;

注意下面框起来的部分:

在这里插入图片描述
调试成功:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

椰卤工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值