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

455 阅读1分钟

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

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;

注意下面框起来的部分:

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