提交带有react-redux-form的表单时出现刷新问题

Question

问题

重要：此问题已解决；参见下面的说明。

在提交react-redux表单时，我一直遇到页面刷新的问题。我发现了很多类似的问题，因为这是用HTML提交表单的默认行为。但是我还没有找到与此特定库（react-redux-form）有关的任何内容。

我还尝试应用在其他情况下建议的内容，主要是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（）时都会被卸载并重新安装。一个redux动作被触发了。我发现，如果以某种方式修改了父组件的状态，可能会触发子组件的重新安装，则可能会发生这种情况。 我已将状态本地迁移到将其连接到Redux商店的Hall组件，现在它可以正常工作。

Answer 1

它是因为您有一个类型为“提交”的按钮。它的默认操作是刷新页面。

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

您可以在句柄提交功能中放置一个evt.preventDefault()来阻止页面刷新，但是我鼓励您更改按钮类型，然后将handleSubmit函数放在onClick事件上。

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