antd中表单提交的基本使用

import { Form, Input, Button } from 'antd';
import PropTypes from 'prop-types';
const FormItem = Form.Item;

class Forgot extends React.PureComponent {
  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Container>
        <Form
          style={{ width: 250, margin: '28px auto'}}
          onSubmit={(e) => {
            e.preventDefault();
            this.props.form.validateFields((err, values) => {
              if (!err) {
                this.props.handleConfirm(values);
              }
            });
          }}
        >
          <FormItem hasFeedback>
            {getFieldDecorator('email', {
              rules: [
                {
                  type: 'email',
                  message: '请输入正确的邮箱地址'
                },
                {
                  required: true,
                  message: '请输入邮箱地址'
                }
              ]
            })(<Input size="large" placeholder="请输入邮箱地址" />)}
          </FormItem>

          <FormItem>
            <Button size="large" type="primary" style={{ width: '100%' }} htmlType="submit">
              确定
            </Button>
          </FormItem>
        </Form>
      </Container>
    );
  }
}

const ForgotPassword = Form.create({})(Forgot);
Forgot.propTypes = {
  form: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
  handleConfirm: PropTypes.func.isRequired,
};
export default ForgotPassword;

Form.create

使用Form.create({options})(Forgot)包装组件，包装之后的组件会自动添加this.props.form 属性，该属性包含以下API：

• getFieldDecorator ：用于和表单数据进行双向绑定，设置该表单类型为email，在rules中设置校验规则和提示信息。

• validateFields：获取输入域的数据和error，用于在提交前的判断。如果!err才可以提交。数据values就是{email: a@qq.com}这样的格式。传递给handleConfirm函数进行提交请求操作。

在包装组件的时候，可以给options传入一些配置：

• mapPropsToFields：把父组件属性映射到表单上（把 Redux store 中的值读出），可以给表单赋值。

• onFieldsChange：当 Form.Item 子节点的值发生改变时触发，可以把对应的值转存到 Redux store

• onValuesChange：任一表单域的值发生改变时的回调

Form.create({
    mapPropsToFields(props){},
    onFieldsChange(props, changedFields){},
    onValuesChange(props, changedValues, allValues){}
})(Forgot)

Button

Button组件如果要设置类型submit或者reset等，在html中是使用type直接设置，在antd中用htmlType代替。

校验state和导出

校验state时，校验的还是原组件Forgot，但是导出时要导出经过包装后的组件ForgotPassword。

更多设置请查看文档