【React深入】从Mixin到HOC再到Hook

下面定义用于双向绑定的HOC，其代理了表单的onChange属性和value属性：

•  发生onChange事件时调用上层Form的changeModel方法来改变context中的model。
•  在渲染时将value改为从context中取出的值。 

function proxyHoc(WrappedComponent) {  
  return class extends Component {  
    static contextTypes = {  
      model: PropTypes.object,  
      changeModel: PropTypes.func  
    }  
    onChange = (event) => {  
      const { changeModel } = this.context;  
      const { onChange } = this.props;  
      const { v_model } = this.props;  
      changeModel(v_model, event.target.value);  
      if(typeof onChange === 'function'){onChange(event);}  
    }  
    render() {  
      const { model } = this.context;  
      const { v_model } = this.props;  
      return <WrappedComponent  
        {...this.props}  
        value={model[v_model]}  
        onChange={this.onChange}  
      />;  
    }  
  }  
}  
@proxyHoc  
class Input extends Component {  
  render() {  
    return <input {...this.props}></input>  
  }  
} 

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!