【React深入】从Mixin到HOC再到Hook(8)

上面的代码只是简略的一部分，除了input，我们还可以将HOC应用在select等其他表单组件，甚至还可以将上面的HOC兼容到span、table等展示组件，这样做可以大大简化代码，让我们省去了很多状态管理的工作，使用如下：

export default class extends Component {  
  render() {  
    return (  
      <Form >  
        <Input v_model="name"></Input>  
        <Input v_model="pwd"></Input>  
      </Form>  
    )  
  }  
} 

表单校验

基于上面的双向绑定的例子，我们再来一个表单验证器，表单验证器可以包含验证函数以及提示信息，当验证不通过时，展示错误信息：

function validateHoc(WrappedComponent) {  
  return class extends Component {  
    constructor(props) {  
      super(props);  
      this.state = { error: '' }  
    }  
    onChange = (event) => {  
      const { validator } = this.props;  
      if (validator && typeof validator.func === 'function') {  
        if (!validator.func(event.target.value)) {  
          this.setState({ error: validator.msg })  
        } else {  
          this.setState({ error: '' })  
        }  
      }  
    }  
    render() {  
      return <div>  
        <WrappedComponent onChange={this.onChange}  {...this.props} />  
        <div>{this.state.error || ''}</div>  
      </div>  
    }  
  }  
}  

const validatorName = {  
  func: (val) => val && !isNaN(val),  
  msg: '请输入数字'  
}  
const validatorPwd = {  
  func: (val) => val && val.length > 6,  
  msg: '密码必须大于6位'  
}  
<HOCInput validator={validatorName} v_model="name"></HOCInput>  
<HOCInput validator={validatorPwd} v_model="pwd"></HOCInput> 

当然，还可以在Form提交的时候判断所有验证器是否通过，验证器也可以设置为数组等等，由于文章篇幅原因，代码被简化了很多，有兴趣的同学可以自己实现。

（编辑：ASP站长网）