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

我想通过表单外部的按钮提交表单并对该表单进行验证。我正在使用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 });
}

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

失败了。添加一个form按钮的属性，其值等于id表单的属性。

form HTML5

与按钮关联的表单元素（其表单所有者）。该属性的值必须是a的id属性<form>同一文档中的元素。如果没有这个属性 指定，将<button>元素将与祖先相关联<form>元素（如果存在）。该属性使您能够 联系<button>元素到<form>a 中任意位置的元素 文件，不仅仅是作为后代<form>元素。

— MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button