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

将原组件的状态提取到HOC中进行管理，如下面的代码，我们将Input的value提取到HOC中进行管理，使它变成受控组件，同时不影响它使用onChange方法进行一些其他操作。基于这种方式，我们可以实现一个简单的双向绑定，具体请看双向绑定。

通过属性代理实现

function proxyHoc(WrappedComponent) {  
  return class extends Component {  
    constructor(props) {  
      super(props);  
      this.state = { value: '' };  
    }  
    onChange = (event) => {  
      const { onChange } = this.props;  
      this.setState({  
        value: event.target.value,  
      }, () => {  
        if(typeof onChange ==='function'){  
          onChange(event);  
        }  
      })  
    }  
    render() {  
      const newProps = {  
        value: this.state.value,  
        onChange: this.onChange,  
      }  
      return <WrappedComponent {...this.props} {...newProps} />;  
    }  
  }  
}  
class HOC extends Component {  
  render() {  
    return <input {...this.props}></input>  
  }  
}  
export default proxyHoc(HOC); 

操作state

（编辑：西安站长网）

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