Проблема с обновлением при отправке формы с помощью формы реакции-редукции

Проблема

Важно! Проблема решена; см. объяснение ниже.

У меня возникла проблема с обновлением страницы при отправке формы реакции-редукции. Я обнаружил много подобных проблем, так как это поведение по умолчанию для отправки формы в HTML; однако я не нашел ничего, связанного с этой конкретной библиотекой (форма реакции-редукции).

Я также пытался применить то, что было предложено в других случаях, в основном, event.preventDefault(), но я не знаю, как использовать объект события с этой библиотекой, поскольку они рекомендуют следующий синтаксис:

<LocalForm onSubmit={(values) => this.handleSubmit(values)}>

Я пробовал с values.event, но безуспешно.

Ниже того, что я намереваюсь иметь:

import React, { Component } from 'react';
import Hall from './HallComponent';
import { Row, Button, Label } from 'reactstrap';
import { Redirect } from 'react-router';
import { LocalForm, Control } from 'react-redux-form';

class Endgame extends Component {

  constructor(props) {
    super(props);
    this.state = { 
      redirect: false
    };

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(values) {
    const date = new Date();
    this.props.addScore({
      date: date.toLocaleDateString("en-GB"),
      name: values.name,
      score: this.props.points
    });
    this.setState({ redirect: true });
  }

  render() {
    if (this.state.redirect) {
      return (
        <Redirect to="/hall" />
      );
    }
    else {
      return(
        <div className="container">
          <div className="row">
            <div className="col-12 col-md-5 m-1">
              <p>Your score is: {this.props.points}</p>
              <p>Add you name to the Hall of Fame</p>
              <LocalForm onSubmit={(values) => this.handleSubmit(values)}>
                <Row className="form-group">
                  <Label htmlFor="name">Nickname</Label>
                  <Control.text model=".name" id="name" name="name" placeholder="Your Name" className="form-control"  />
                </Row>
                <Button type="submit">Submit</Button>
              </LocalForm>
            </div>
            <div className="col-12 col-md-5 m-1">
              <Hall scores={this.props.scores} />
            </div>
          </div>
        </div>
      );
    }
    }

}

export default Endgame;

Решение

Я обнаружил, что проблема не в кнопке отправки, а в том, как я расположил свои компоненты. Я все еще не совсем уверен в том, что на самом деле происходит за сценой, но мой вышеприведенный компонент Hall демонтировался и монтировался заново каждый раз, когда addScore() например. было запущено избыточное действие. Я обнаружил, что это могло произойти, если состояние родительского компонента было каким-то образом изменено, что могло вызвать повторное монтирование дочерних компонентов. Я перенес состояние локально в компонент Холла, подключив его к хранилищу избыточности, и теперь он работает правильно.


reactjs redux react-redux react-redux-form
person Joel Barenco    schedule 18.01.2019    source источник
comment
Добро пожаловать в Stack Overflow! Похоже, ваш вопрос может быть дубликатом. Возможно, вы могли бы посмотреть на это и посмотреть, поможет ли это, и если не объяснить, в чем отличие?   -  person A Jar of Clay    schedule 18.01.2019
comment
Возможный дубликат redux-form обновляет страницу при отправке   -  person A Jar of Clay    schedule 18.01.2019
comment
Спасибо :) это не одна и та же библиотека (редукционная форма против реактивной редукционной формы).   -  person Joel Barenco    schedule 18.01.2019
comment
Ты прав, извини за это. Может быть, удалите свой тег redux-form, чтобы сделать это более понятным?   -  person A Jar of Clay    schedule 18.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

это потому, что у вас есть кнопка типа "отправить". Его действие по умолчанию — обновить страницу.

                <Button type="submit">Submit</Button>

Вы можете поместить evt.preventDefault() в функцию отправки дескриптора, чтобы остановить обновление страницы, но я бы посоветовал вам просто изменить тип кнопки и поместить функцию handleSubmit в событие onClick, подобное этому.

                <Button type="button" onClick={this.handleSubmit}>Submit</Button>
person Chase    schedule 18.01.2019
comment
Спасибо, Чейз. Как мне получить доступ к значениям формы (ранее как параметры в handleSubmit)? - person Joel Barenco; 18.01.2019
comment
К сожалению, если вы используете onClick, а не кнопку отправки, вам нужно будет установить эти значения формы в состоянии или избыточности, чтобы вы могли получить к ним доступ в состоянии в функции. Если вам не хочется писать это, просто используйте evt.preventDefault(). - person Chase; 18.01.2019
comment
Вам нужен доступ к объекту события в вашей функции, поэтому измените способ размещения handleSubmit в LocalForm на onSubmit = (values, evt) => {this.handleSubmit(values, evt)} - person Chase; 18.01.2019
comment
Чейз - я попробовал ваш последний комментарий с (values, evt), но страница продолжает обновляться. Что касается вашего первого комментария, моя цель использования библиотеки заключалась в том, чтобы избежать управления данными. Я также обнаружил, что предполагается, что он уже выполняет event.preventDefault(), как описано в документах: davidkpiano.github.io/react-redux-form/docs/api/Form.html - person Joel Barenco; 18.01.2019