使用Apollo和GraphQL的React表单不会触发onSubmit

Question

I can't seem to get onSubmit to trigger. Can anyone spot what's the issue here? I'm using Ant Design, but I don't think that's the issue.

Note: Currently, the GraphQL mutation below (via Apollo) does get sent to the back-end properly. Removing onClick in the Button does trigger onSubmit , but the GraphQL query does not get sent.

Update: I haven't found a solution but I found that if I remove this line if (loading) return <p>loading...</p> , then onSubmit gets triggered.

 import React from 'react' import gql from 'graphql-tag' import { Mutation } from 'react-apollo' import { Form, Input, Button, message } from 'antd' import { __log } from '../utils/log.js' const { TextArea } = Input const ADD_MENTAL_MODEL_MUTATION = gql` mutation AddMentalModel($mentalModelText: String!, $thoughts: [String!]){ addMentalModel(text: $mentalModelText, thoughts: $thoughts) { text id } } ` class MentalModelForm extends React.Component { // constructor(props){ // super(props) // this.handleOnSubmit = this.handleOnSubmit.bind(this) // } handleOnSubmit = e => { console.log('handleOnSubmit IS EXECUTED!!!!!') e.preventDefault() debugger } _hasErrors = (fieldsError) => { return Object.keys(fieldsError).some(field => fieldsError[field]) } render(){ const { getFieldDecorator, isFieldTouched, getFieldError, getFieldValue, getFieldsError } = this.props.form return( <Form onSubmit={ e => this.handleOnSubmit(e)}> {/* <Form onSubmit={this.handleOnSubmit}> */} <Form.Item label='Mental Model'> { getFieldDecorator( 'mentalModel', { rules: [{required: false, whitespace: false, message: 'Missing or too short of a mental model'}] } )(<TextArea />) } </Form.Item> <Form.Item label='Thought'> { getFieldDecorator( 'thought', { rules: [{required: false, whitespace: false, message: 'Must add a thought'}] } )(<Input />) } </Form.Item> <Form.Item> <Mutation mutation={ADD_MENTAL_MODEL_MUTATION} variables={ { mentalModelText: getFieldValue('mentalModel'), thoughts: [getFieldValue('thought')], } } > { (mutation, {loading, error, data}) => { if (loading) return <p>loading...</p> return( <Button type='primary' htmlType='submit' onClick={mutation} disabled={this._hasErrors(getFieldsError())} > Add new mental model </Button> ) } } </Mutation> </Form.Item> </Form> ) } // render } // class export default Form.create({name: 'mentalmodel_hoc'})(MentalModelForm) 

Answer 1

I think that the Button type should be submit instead of primary

<Button
   type='submit'
   onClick={mutation}
   disabled={this._hasErrors(getFieldsError())}
   >
   Add new mental model
</Button>