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没有attached作为prop。

通过添加此prop，您的button标签将转换为div标签。通过添加type="submit"也不能与此prop一起使用，因为毕竟它仅是div。要提交表单，我们只需要button标签。

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

您只能拥有这个，

<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中一样，默认情况下，表单内的按钮会触发表单提交事件。

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

4 个答案: