react系列(5)组件内部方法和静态方法

来源:互联网 发布:手机淘宝评价管理截图 编辑:程序博客网 时间:2024/06/08 11:03

组件内部方法:通过该方法来修改组件自身状态监听组件事件。除了正常用法外,还允许在父组件通过创建事件句柄  ,并作为 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


阅读全文
0 0
原创粉丝点击