我的 cra 应用程序中有一个登录组件,我的状态显示在我的 url 中,无论是在开发还是生产中。我已将电子邮件替换为 {email}。
http://localhost:3000/?user= {电子邮件}&密码=密码
我不知道为什么会发生这种情况。我还有其他几个组件,但没有一个组件表现出相同的行为。我还确认这来自 React 组件,而不是任何路由处理(我重命名了状态,并且 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);
预先感谢您的帮助!
最佳答案
preventDefault
是您要查找的内容,您可以更改按钮类型以在 LoginButton
中提交像这样的组件 <input type="submit" value="Login"/>
然后
<form
style={styles.form}
onSubmit={(e) => {
e.preventDefault();
this.onSubmit();
}}
>
关于javascript - 为什么我的 React 组件状态显示在我的 url 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60728690/