單擊“附加表單”按鈕不會觸發表單提交

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>

Answer 2

Form.Button沒有作為prop attached 。

通過添加此prop ，您的button標簽將轉換為div標簽。 通過添加type="submit"也不適用於此prop因為畢竟它僅是div 。 要提交表單，我們只需要button標簽。

最好不要在Form使用此attached prop 。

你只能有這個

<Form.Button content='Submit' />

或者您可以將Button標記與type="submit"

import {Button} from 'semantic-ui-react'

<Button type="submit">Submit</Button>

Answer 3

Form.Button沒有attached為屬性。

您只能使用content = 'Submit' ，並且attached屬性無效。

所以這是正確的代碼：

<Form.Button content='Submit' />

或者，如果您想要新屬性：

import { Form, Button } from 'semantic-ui-react'


<Button type="submit">Submit</Button>

因此，如果要導入Button ，可以使用它並執行type="Submit"屬性，然后在內部添加Submit作為文本，然后結束Button 。

總而言之，您無法將其attached在內部，因此必須將其刪除才能正常工作。

Answer 4

只需嘗試您的表單

<Button>Submit</Button>

與html中一樣，默認情況下，表單內的按鈕會觸發表單提交事件。