Reactjs 如何处理窗体子组件中的按钮

我有这个部分：

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>
    )
  }
}

有什么想法吗？

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

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

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

addItem = event => { 
    event.preventDefault() 
    debugger //I want to be here!!
    this.setState((prevState) => {
      return {list: [...prevState.list, {red:"", name:""}]}
    });
  }

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