Как обрабатывать кнопки в дочерних компонентах формы - PullRequest
Новая
       26

Как обрабатывать кнопки в дочерних компонентах формы

0 голосов
/ 19 марта 2019

У меня есть этот компонент: 

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 у ребенка. И это не самое плохое, у меня в классе step3 есть другой метод для добавления предметов, и теперь я не могу получить к нему доступ ... 

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

Есть идеи ??

1 Ответ

1 голос
/ 19 марта 2019

Кнопка не имеет обработчика onSubmit, поэтому вместо нее будет вызываться функция, заданная для onSubmit формы.

Вы можете изменить обработчик на onClick и изменить тип кнопки с submit, который по умолчанию установлен на button, и обработчик отправки не будет вызван. 

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