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

比眉伴天荒 2021-09-14 10:22 613阅读 0赞

## 组件内部方法 ##

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

//组件内部方法
    var Content =  React.createClass({
    	render:function(){
    		return (
    			<div>
    				<input type="text" value={this.props.value} onChange={this.props.handleChange}/>
    				<h1>{this.props.value}</h1>
    			</div>
    		)
    	}
    });
    
    var BindText = React.createClass({
    	getInitialState:function(){
    		return {value:"hello"}
    	},
    	handleChange:function(event){
    		this.setState({value:event.target.value}); //通过事件来修改数据
    	},
    	render:function(){
    		return (
    			<div><Content value={this.state.value} handleChange={this.handleChange}/></div>
    		)
    	}
    });

上例中的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(<div>
    			<button onClick={(e) => this.handleClick(1,2,e)}>click</button>
    		</div>)
    	}
    }

## 组件静态方法 ##

静态方法是指即使没有组件实例也可以直接调用，如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