react的mixin学习

文章参考

使用react-mixin插件引入

import reactMixin  from 'react-mixin'

let myObj = {
    // 定义属性 reactMixin无效，只能识别方法
    username:"huangbioa",
    speak: function(){
        alert(this.state.type);
    }
};

class MyIndex extends BaseComponent {
	state = {
	    type: 'money',
	};

	constructor(props){
	    super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e){
        this.setState({
            type: e.target.value
        })
        this.speak();
        this.testAction();
    }

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

}
// 只能继承方法
reactMixin.onClass(MyIndex,myObj);

使用extends继承基类

import React from 'react';

class BaseComponent extends React.Component {
    constructor(props){
        super(props);
    }

    testAction(){
        console.log("testAction");
        alert(this.state.type);
    }
}

export default BaseComponent;