为什么我的 React 组件状态会显示在我的 url 中？

Question

我的 cra 应用程序中有一个登录组件，我的状态显示在我的 url 中，无论是在开发还是生产中。我已将电子邮件替换为 {email}。

http://localhost:3000/?user={email}&password=password

我不知道为什么会这样。我还有其他几个组件，它们都没有表现出相同的行为。我还确认这是来自 react 组件，而不是任何路由处理（我重命名了 state，url 也发生了变化）。

我该如何解决这个问题？

import React from 'react';
import '../../App.css';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import LoginButton from './LoginButton';

class Card extends React.Component {

    constructor(props) {
        super(props);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    state = {
        user: "",
        password: ""
      };

    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }

    onSubmit(){
        this.props.login(this.state.user, this.state.password);
    }

    render(){
        return (
            <div style={styles.container}>
                <form style={styles.form}>
                <div style={styles.formContainer}>
                    <div style={styles.block}>
                        <div style={{display: 'flex', flexDirection: 'row'}}>
                            <i class="fas fa-user-circle" style={styles.iconPosition}></i>
                            <div style={{display: 'flex', flexDirection: 'column', flex: 5}}>
                                <div style={{display: 'flex', alignItems: 'start', marginBottom: '15px', fontFamily: 'Ubuntu', fontSize: '14pt'}}>
                                    EMAIL
                                </div>
                                <input 
                                type="text" 
                                name="user"
                                value={this.state.user}
                                onChange={this.handleInputChange} 
                                placeholder='john.snow@solidcad.ca'
                                style={{fontFamily: 'Ubuntu', fontSize: '10px', border: 'none'}}
                                /> 
                            </div>
                        </div>
                    </div>

                    <div style={styles.block}>
                        <div style={{display: 'flex', flexDirection: 'row'}}>
                            <i class="fas fa-unlock-alt" style={styles.iconPosition}></i>
                            <div style={{display: 'flex', flexDirection: 'column', flex: 5}}>
                                <div style={{display: 'flex', alignItems: 'start', marginBottom: '15px', fontFamily: 'Ubuntu', fontSize: '14pt'}}>
                                    PASSWORD
                                </div>
                                <input 
                                    type="password" 
                                    name="password" 
                                    value={this.state.password}
                                    onChange={this.handleInputChange}
                                    placeholder='*****'
                                    style={{fontFamily: 'Ubuntu', fontSize: '10px', border: 'none'}}
                                />
                            </div>
                        </div>
                    </div>

                    <LoginButton label='LOGIN' onClick={this.onSubmit}/>
                </div>

              </form>
            </div>
        );
    }
}

export default connect(null, actions)(Card);

这是包含登录屏幕和登录的应用组件：

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import './App.css';
import Configurator from './components/Configurator';
import LoginScreen from './components/Login/LoginScreen';
import * as actions from './actions';

const Dashboard = () => <h2>Dashboard</h2>

class App extends Component {

  componentDidMount(){
    this.props.fetchUser();
  }

  renderContent() {
      switch (this.props.auth) {
        case null:
          return <LoginScreen />;
        default:
          return (
            <BrowserRouter>
                  <Route exact path="/" component={Configurator}/>
                  {/* <Route path="/dashboard/" component={Dashboard}/>    */}
            </BrowserRouter>
          )
      }
  }

  render() {
    return (
      <div className="App" style={styles.container}>
        {this.renderContent()}
      </div>
    );
  };
}

function mapStateToProps({ auth, desAut }) {
  return { auth, desAut };
}

export default connect(mapStateToProps, actions)(App);

提前感谢您的帮助！

Answer 1

preventDefault 就是你要找的东西，你可以像<input type="submit" value="Login"/> 这样在LoginButton 组件中更改按钮类型以提交，然后

<form 
  style={styles.form} 
  onSubmit={(e) => { 
   e.preventDefault();
   this.onSubmit(); 
  }}
>

Answer 2

您必须在您的 form 上提供一个 onSubmit 处理程序，如下所示：

<form onSubmit={(event) => {
  event.preventDefault();
  ...process form data...
  }>
  ...
</form>