Обновление проблемы при отправке формы с реактивной реакцией - PullRequest
Новая
       29

Обновление проблемы при отправке формы с реактивной реакцией

0 голосов
/ 18 января 2019

Выпуск

Важно: Это было решено; см. объяснение ниже.

У меня возникла проблема обновления страницы при отправке формы реагирования-редукции. Я обнаружил много подобных проблем, так как это стандартное поведение при отправке формы в 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 (), например. излишнее действие было запущено. Я обнаружил, что это может произойти, если состояние родительского компонента было изменено каким-либо образом, что может вызвать перемонтирование дочерних компонентов. Я локально перенес состояние в компонент Hall, подключив его к хранилищу приставок, и теперь оно работает правильно.

1 Ответ

0 голосов
/ 18 января 2019

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

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

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

                <Button type="button" onClick={this.handleSubmit}>Submit</Button>
...