Question

我想通过表单外部的按钮提交表单，并对该表单进行验证。我正在使用来自react-bootstrap的Form标签。

我的代码未验证表单

<Form
    noValidate
    validated={validated}
    onSubmit={e=> this.handleSubmit(e)}>

    <Form.Control
        required
        placeholder="Product Name"
        onChange={e => this.setState({name: e.target.value })}
        pattern={"[A-Z a-z]{3,30}"}
    />
</Form>
<button type="button" value="send" onClick={(e) => this.handleSubmit(e)} className={"btn btn-primary"}>Save</button>

handleSubmit(event) {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
    }
    else
        this.AddProduct();

    this.setState({ validated: true });
}

Answer 1

理想情况：不要那样做。表单元素是有用的结构元素。

失败。将Select * from [rptListaMovs_4$A15:G]属性添加到按钮，使其值等于表单的form属性。

表单 HTML5

与按钮关联的表单元素（其表单所有者）。该属性的值必须是   同一文档中的id元素。如果该属性不是   指定，<form>元素将与祖先关联   <button>元素（如果存在）。此属性使您能够   将<form>元素与<button>元素关联   文档，而不仅仅是<form>元素的后代。

— MDN

如何通过表单外部的按钮提交表单？

1 个答案: