Question

 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函数未调用

注意：道具（类型和形式）通过得很好，并使用控制台元素进行检查

问题与反应有关吗？

Answer 1

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

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

如果您不想在表单内移动footer，则onClick上应该有Button

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

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

Answer 2

将按钮放入表单内。它会起作用。

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

Answer 3

您可以为表单设置一个 ref，然后在“Button onClick”中执行 ref.submit()。

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

如果你想做得更好，你应该做一些像......

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

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

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

表单不是使用react从外部按钮提交的

3 个答案: