表单未使用反应从外部按钮提交答案

【问题标题】：Form is not submitting from an outer button using react表单未使用反应从外部按钮提交
【发布时间】：2020-01-18 00:32:27
【问题描述】：

 class Index extends React.Component {
    state = {isLoading: false}

    onSubmit = (event) => {
       console.log('here we go');
       event.preventDefault();
       // this.checkEmailExistance();
    };

    render() {
      return (
       <>
         <form id="myForm" onSubmit={this.onSubmit} noValidate>
            <CredentialsInputs />
         </form>
         <footer>
            <Button type="submit" form="myForm" isPrimary isDisabled={!isValid}>   
               Continue
            </Button>
          </footer>
        </>
     )}
 }

onSubmit 函数未被调用

注意：道具（类型和形式）已顺利通过并使用控制台元素进行检查

问题与反应有关吗？

【问题讨论】：

它是一个绑定函数？
@rrd 你不需要绑定，因为它是一个胖箭头函数。此外，登录到控制台不需要绑定。
您在render() 内部还是render() 外部有onSubmit？请给我完整的功能好吗？
将 onSubmit={this.onSubmit} 移动到按钮的 onClick 处理程序，然后它会调用吗？
你想要的使用方式也是hacky bro。正式来说，提交按钮应该位于表单标签之间

标签： javascript html reactjs forms

【解决方案1】：

您已经在表单之外编写了提交按钮。您应该将提交按钮移到表单内，

<form id="myForm" onSubmit={this.onSubmit} noValidate>
     <CredentialsInputs />
     <footer>
         <Button type="submit" form="myForm" isPrimary isDisabled={!isValid}>
           Continue
         </Button>
     </footer>    
</form>

如果您不想将footer 移动到表单内，那么您应该在Button 上添加onClick

<form id="myForm" noValidate>
     <CredentialsInputs />
</form> 

<footer>
    <Button type="submit" form="myForm" isPrimary isDisabled={!isValid} onClick={this.onSubmit}>
        Continue
    </Button>
</footer>

【讨论】：

我的目的是如何在按钮外提交表单，可以吗？

【解决方案2】：

将按钮放在表单中。它会起作用的。

您应该始终在表单中包含一个按钮元素以自动触发 onSubmit 方法，否则您可以使用按钮的 onClick 事件手动调用该方法。

【讨论】：

【解决方案3】：

您可以在表单中设置ref，然后在“按钮 onClick”中执行 ref.submit()。

在这种情况下，您将id 设置为表单...因此，如果您想制作一个非常丑陋的实现，您可以执行document.getElementByid('myForm').submit() 之类的操作

如果你想做得更好，你应该做类似...

<form ref={ref => this.formRef = ref} ...

<button onClick={() => this.formRef.submit()}

仍然......不是超级漂亮。我会推荐 Hooks + useRef。

【讨论】：