[英]Attached form button doesn't trigger form submit when clicked
Consider following example: 考虑以下示例:
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>
)
}
}
When Form.Button
is attached clicking it does not leads to form submission. 附加
Form.Button
,单击不会导致表单提交。 When attached
property is omitted onSubmit
handler works as expected. 如果省略了
attached
属性,则onSubmit
处理程序将按预期工作。
Is it expected behaviour or should I file a bug issue on GitHub? 是预期的行为还是我应该在GitHub上提交错误问题?
please add type="submit" to your submit button 请在您的提交按钮中添加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>
Form.Button
don't have attached
as prop
. Form.Button
没有作为prop
attached
。
By adding this prop
, your button
tag is getting converted to div
tag. 通过添加此
prop
,您的button
标签将转换为div
标签。 By adding type="submit"
also don't work with this prop
because after all it is div
only. 通过添加
type="submit"
也不适用于此prop
因为毕竟它仅是div
。 And to submit a form we need only button
tag. 要提交表单,我们只需要
button
标签。
Better to not use this attached
prop
in Form
. 最好不要在
Form
使用此attached
prop
。
You can only have this, 你只能有这个
<Form.Button content='Submit' />
or you can use Button
tag with type="submit"
或者您可以将
Button
标记与type="submit"
import {Button} from 'semantic-ui-react'
<Button type="submit">Submit</Button>
Form.Button
does not have attached
as a property. Form.Button
没有attached
为属性。
You can only use content = 'Submit'
and the attached
property won't work. 您只能使用
content = 'Submit'
,并且attached
属性无效。
So this is the right code: 所以这是正确的代码:
<Form.Button content='Submit' />
Or if you want new property: 或者,如果您想要新属性:
import { Form, Button } from 'semantic-ui-react'
<Button type="submit">Submit</Button>
So if you want to import Button
, you can use it and do the type="Submit"
property and then inside add Submit
as the text and then end the Button
. 因此,如果要导入
Button
,可以使用它并执行type="Submit"
属性,然后在内部添加Submit
作为文本,然后结束Button
。
In conclusion, you cannot have attached
inside so you have to remove it for it to work. 总而言之,您无法将其
attached
在内部,因此必须将其删除才能正常工作。
Just try inside your form 只需尝试您的表单
<Button>Submit</Button>
as in html, button inside form triggers the form submit event by default. 与html中一样,默认情况下,表单内的按钮会触发表单提交事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.