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

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

Form.Button 没有 attached 作为 prop。

通过添加此 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 2

只需在您的表单中尝试

<Button>Submit</Button>

如html，表单内的按钮默认触发表单提交事件。

Answer 3

请将 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 4

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，因此您必须将其移除才能正常工作。

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

Attached form button doesn't trigger form submit when clicked

javascript

reactjs

button

onsubmit

semantic-ui-react