Question

我有这个组成部分：

onclick=""

这是父组件，一个简单的多步骤组件。

在我的step3中，我有一个添加动态字段的按钮。因此，我正在使用此按钮添加这些字段。问题是当我单击该按钮时。由于某种原因，它从父级调用handleSubmit事件。

class ConnectedStepsForm extends React.Component {

  handleSubmit = event => {
    event.preventDefault()
    debugger
    //Here is where i am. 
  }

  render() {
    return (
      <React.Fragment>
        <p>Datos personales: Paso  {this.props.step}</p>
        <form onSubmit={this.handleSubmit}>
          <Step1 />
          <Step2 />
          <Step3 />
          <TabNavButton />
        </form>
      </React.Fragment>
    )
  }
}

但是，它没有按我期望的那样工作，它从未向我显示子项中handleSubmit发出的警报。那不是最坏的部分，在step3类中，我还有另一个方法可以添加项目，现在我无法访问它了……

  handleSubmit = event => {
    event.preventDefault()
    alert('it works')
  }
  render(){
    if (this.props.step !== 3) {
      return null
    } 
    return(
      <React.Fragment>
        {/* Se puede utilizar conditional rendering para cambiar la funcionalidad del boton */}
        <button onClick={this.addField} onSubmit={this.handleSubmit}>Añadir Contacto</button>
...

有什么想法吗？

Answer 1

按钮没有onSubmit处理程序，因此将调用表单的onSubmit属性所提供的函数。

您可以将处理程序更改为onClick，并将按钮类型从默认的submit更改为button，并且不会调用提交处理程序。

<button type="button" onClick={this.addField}>
  Añadir Contacto
</button>

如何处理表单子组件中的按钮

1 个答案: