react系列(5)组件内部方法和静态方法
组件内部方法:通过该方法来修改组件自身状态或监听组件事件。除了正常用法外,还允许在父组件通过创建事件句柄 ,并作为 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就是组件内部方法。组件静态方法:通过该方法可以在组件类上直接调用,如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
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。
