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

问题描述

我似乎无法onSubmit触发。谁能发现这里有什么问题？我正在使用 Ant Design，但我认为这不是问题所在。

注意：目前，下面的 GraphQL 突变（通过 Apollo）确实会正确发送到后端。onClick在Buttondoes trigger中删除onSubmit，但 GraphQL 查询不会被发送。

更新：我还没有找到解决方案，但我发现如果我删除了这一行if (loading) return <p>loading...</p>，就会onSubmit被触发。

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)

标签： javascriptreactjsgraphqlreact-apolloantd

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

问题描述

解决方案

推荐阅读