单击“附加表单”按钮不会触发表单提交

Question

考虑以下示例：

import React, { Component } from 'react'
import { Form } from 'semantic-ui-react'

class FormExample extends Component {
  state = {}

  handleChange = (e, { name, value }) => this.setState({ [name]: value })

  handleSubmit = () => this.setState({ email: '', name: '' })

  render() {
    const { name, email } = this.state

    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Group>
          <Form.Input placeholder='Name' name='name' value={name} onChange={this.handleChange} />
          <Form.Input placeholder='Email' name='email' value={email} onChange={this.handleChange} />
          <Form.Button attached='bottom' content='Submit' />
        </Form.Group>
      </Form>
    )
  }
}

如果Form.Button附加了附件，则单击它不会导致表单提交。当attached省略属性时，onSubmit处理程序将按预期工作。

是预期的行为还是我应该在GitHub上提交错误问题？

Answer 1

请在您的提交按钮中添加type =“ submit”

<Form.Group>
    <Form.Input placeholder='Name' name='name' value={name} onChange={this.handleChange} />
     <Form.Input placeholder='Email' name='email' value={email} onChange={this.handleChange} />
     <Button type='submit'>Submit</Button>
 </Form.Group>