From表单有多个按钮时 ，怎样才能区分点击了哪个按钮 antd / reactjs

Question

下面from表单有两个按钮，查询按钮不需要传结束日期，生成按钮则需要传，我怎么区分点击了哪个按钮呢

  handleSearch = e => {
    e.preventDefault();
    const {dispatch,form} = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue
      };
      console.log(values)
    });
  };

<Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={13} sm={24}>
            <FormItem label="计划信息">
              {getFieldDecorator('funds', {
                rules: [{ required: true, message: '内容不能为空!' }],
              })(
                <Select
                  notFoundContent={infoLoading ? <Spin size="small" /> : null}
                  placeholder="请选择"
                  style={{ width: '100%' }}
                  mode="tags"
                  maxTagCount={1}
                >
                  {planInfoList.map((item,index)=> <Option key={index} value={item.fund}>{`${item.fund} ${item.Portfolioname}`}</Option>)}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={5} sm={8}>
            <Form.Item label="起始日期">
              {getFieldDecorator('beginDate', {
                initialValue: beginDate?moment(beginDate):null,
                rules: [{ required: false, message: '日期不能为空!' }],
              })(
                <DatePicker placeholder="选择日期" />,
              )}
            </Form.Item>
          </Col>
          <Col md={5} sm={8}>
            <Form.Item label="结束日期">
              {getFieldDecorator('endDate', {
                initialValue:endDate?moment(endDate):null,
                rules: [{ required: false, message: '日期不能为空!' }],
              })(
                <DatePicker placeholder="选择日期" />,
              )}
            </Form.Item>
          </Col>
          <Col md={8} sm={12}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">查询</Button>
              <Button type="primary" htmlType="submit" style={{ marginLeft: 12 }}>生成</Button>
            </span>
          </Col>
        </Row>
      </Form>

Answer 1

根据source判断一下

Answer 2

不需要在Form上监听onSubmit事件。
直接把事件绑定在Button上:

handleSearch = (type) => {
    // 这里根据type判断是查询还是生产
    const {dispatch,form} = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue
      };
      console.log(values)
    });
 };

<Form>
   <Button type="primary" onClick={()=>this.handleSearch(1)}>查询</Button>
   <Button type="primary" onClick={()=>this.handleSearch(2)}>生成</Button>
</Form>

Answer 3

直接把事件绑定在Button上

Answer 4

button 绑定不同的 data-, 根据 e.detail.target.dataset 的值判断点击了哪个按钮