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

Question

我有这个组件：

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

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

在我的第 3 步中，我有一个添加动态字段的按钮。所以我使用这个按钮来添加这些字段。问题是当我点击那个按钮时。出于某种原因，它从父级调用 handleSubmit 事件。

  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>
...

但是，它并没有像我预期的那样工作，它从来没有向我显示来自子项中的 handleSubmit 的警报。这还不是最糟糕的部分，我在步骤 3 class 中有另一种方法用于添加项目，现在我无法访问它...

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

有什么想法吗？？

Answer 1

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

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

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

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

How to handle buttons in child components of a Form

components

parent-child

reactjs

es6-class