react系列（5）组件内部方法和静态方法

组件内部方法

作用域在组件内部，一般用来更新状态和触发事件监听。除了一般用法外，还允许在父组件通过创建事件句柄  ，并作为 prop传递到你的子组件上，由子组件来调用，实现由子组件驱动更新父组件的state。

//组件内部方法
var Content =  React.createClass({
	render:function(){
		return (
			

				
				
{this.props.value}
			
		)
	}
});

var BindText = React.createClass({
	getInitialState:function(){
		return {value:"hello"}
	},
	handleChange:function(event){
		this.setState({value:event.target.value}); //通过事件来修改数据
	},
	render:function(){
		return (
			

		)
	}
});

上例中的handleChange为组件内部方法。内部方法传递参数写法如下：

// ES6
class TestJSX extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			id: "myid",
			name: "myname"
		};
	}

	handleClick(id, name, e) {
		console.log(id);
		console.log(name);
		console.log(e);
	}

	render() {
		return(

			 this.handleClick(1,2,e)}>click
		
)
	}
}

 

组件静态方法

静态方法是指即使没有组件实例也可以直接调用，如Component.fun()。定义静态方法时，需写在组件的statics对象内。如下例中的customMethod。

//组件静态方法
var MyComponent = React.createClass({
    statics: {
      customMethod: function(foo) {
        return foo === 'bar';
      }
    },
    render: function() {
    }
});
var result = MyComponent.customMethod('bar');
console.log(result);   // true