React提交请求页面重复刷新

React+ant desin，提交请求的时候页面重复刷新

原因：使用了form的提交，form的提交默认刷新页面

解决方案：改用普通的onClick事件，或者使用preventDefault阻止事件蔓延。

下附上修改后代码

事件代码

  /**
   * 点击查询
   * 校验通过后把数据提交到上层组件
   */
  public handleSubmit = (e: any) => {
    // 阻止事件蔓延导致的重复刷新
    e.preventDefault();
    this.props.form.validateFields((err: any, values: any) => {
      this.props.clickSearch(values);
    });
  }

表单代码

      <Form className="ms-search-form" onSubmit={this.handleSubmit}>
        <Row gutter={16}>
          <Col span={8}>
            <FormItem label="姓名" labelCol={{ span: 5 }}>
              {getFieldDecorator('name', {
                initialValue: aaa,
              })(
                <Input placeholder="输入姓名" maxLength={20} />
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="身份证" labelCol={{ span: 5 }}>
              {getFieldDecorator('cardCode', {
                initialValue: ""
              })(
                <Input placeholder="输入身份证号" maxLength={18} />
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="性别" labelCol={{ span: 5 }}>
              {getFieldDecorator('sex', {
                initialValue: 0
              })(
                <Select>
                  <Select.Option key="0" value={0}>全部</Select.Option>
                  {genderList}
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={8}>
            <FormItem labelCol={{ span: 5 }} label="手机号">
              {getFieldDecorator('tel', {
                initialValue: ""
              })(
                <Input placeholder="输入手机号" maxLength={11} />
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem labelCol={{ span: 5 }} label="邮箱">
              {getFieldDecorator('email', {
                initialValue: ""
              })(
                <Input placeholder="输入邮箱" maxLength={30} />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('contractStatus', {
                initialValue: 0
              })(<p />)}
            </FormItem>
          </Col>
          <Col span={8} style={{ textAlign: "right" }}>
            <FormItem>
              <Button type="primary" className="btn" htmlType="submit">查询</Button>
              <Button type="default" className="btn" onClick={this.handleReset}>重置</Button>
            </FormItem>
          </Col>
        </Row>
      </Form>