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

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中使用这个attachedprop。

你只能拥有这个，

<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，所以你必须删除它才能工作。