admin-client-antd-react-demo

antd表单收集数据

组件和组件标签的关系：
就好比类型和实例的关系。

使包装的路由组件成为默认暴露的组件：

const WrappedLogin= Form.create()(Login)

export default WrappedLogin

打开工具：
可看见两个Login组件而，那个实例Login组件接受到了一个非常重要的属性form，其内部包含很多可使用的方法，见工具：

image.png

为验证推论，见官网：

image.png

总结1：上面包装WrappedLogin的代码目的：
为了给那个非包装的Login组件传递一个重要具有表单数据收集和验证的一系列方法的props属性对象form

高阶函数：

1. 接收参数是函数
2. 返回值是函数
   例如上面的create函数。
   常见的高阶函数：
   Promise()/then()
   数组很多方法：
   map()/reduce()/find()/filter()...
   还有setTimeout()/setInterval()bind()addEventLisenter()...
   好处：
   功能更加动态，更加具有扩展

高阶组件
高阶组件是参数为组件，返回值为新组件的函数

---

• 接下来就是利用属性对象form收集表单数据：

  handleSubmit = e => {
    e.preventDefault(); // 阻止事件默认行为不提交表单
    const form = this.props.form; // 得到收集好的输入数据
    const username = form.getFieldValue("username");
    const password = form.getFieldValue("password");

    const values = form.getFieldsValue();
    console.log(username, password, values);
  };
---// render里面-----------
            
              {getFieldDecorator("username", {
                rules: [
                  {
                    required: true,
                    message: "请输入用户名"
                  }
                ]
              })(
                
                  }
                  placeholder="登录名"
                />
              )}
            
            
              {getFieldDecorator("password", {
                rules: [
                  {
                    required: true,
                    message: "请输入密码"
                  }
                ]
              })(
                
                  }
                  type="password"
                  placeholder="密码"
                />
              )}
            

效果正确：

image.png

image.png