我有两组表单：一组用于登录，另一组用于用户注册。它们都有自己的组件，css文件和路由。但令人惊讶的是，在任何给定的时间点，只有登录表单工作即使代码是一样的。我甚至删除了表单标签仍然没有显示我提交的内容。我也试过尝试p
这是2个文件的代码。
//Registeration.js
import React from 'react'
import './registeration_form.css'
class Register extends React.Component
{
constructor(props)
{
super(props);
this.state={username:'',email:'',password:'',confirm_pass:''}
this.change_email=this.change_email.bind(this)
this.change_password=this.change_password.bind(this)
this.change_username=this.change_username.bind(this)
this.confirm_pasword=this.confirm_pasword.bind(this)
this.valdiate_data=this.valdiate_data.bind(this)
}
change_username(e)
{
this.setState({username:e.target.value})
}
change_email(e)
{
this.setState({email:e.target.value})
}
change_password(e)
{
this.setState({password:e.target.value})
}
confirm_pasword(e)
{
this.setState({confirm_pass:e.target.value})
}
valdiate_data(event)
{
event.preventDefault()
console.log("hello")
console.log(this.state.username)
console.log(this.state.email)
console.log(this.state.password)
console.log(this.state.confirm_pass)
}
render()
{
return(
<div>
<div id="register">
<form method="post">
<legend id="register_legend"><b>Registeration Form</b></legend>
<label htmlFor="username">Username:</label>
<input type="text" id="username" name="username" onChange={this.change_username} placeholder="Username"/>
<label htmlFor ="email">Email Id:</label>
<input type="text" id="email" name="Email" onChange={this.change_email} placeholder="Email Id"/>
<label htmlFor="password">Password:</label>
<input type="password" id="password" name="password" onChange={this.change_password} placeholder="Password"/>
<label htmlFor ="confirm password">Confirm Password</label>
<input type ="text" id="confirm_password" name="Confirm password" onChange={this.confirm_pasword} placeholder="Confirm Password"/>
<input type="submit" value="Register" onClick={this.validate_data}/>
</form>
</div>
</div>
)
}
}
export default Register
//Login.js`enter code here`
import React from 'react'
import ReactDOM from 'react-dom'
import Supers from 'superagent'
import './Login_Page.css'
//import defaults from 'superagent-defaults'
//var defaults_arg=require('superagent-defaults');
//var superagent_arguments=defaults_arg();
//var superagent_default_arg = defaults()
class Login extends React.Component
{
constructor(props)
{
super(props);
this.state={username:'',password:'',API_Data:[]}
this.Login_data_password=this.Login_data_password.bind(this)
this.Login_data_username=this.Login_data_username.bind(this)
this.MainRedirect=this.MainRedirect.bind(this)
this.api_call_login=this.api_call_login.bind(this)
}
Login_data_username(e)
{
this.setState({username:e.target.value})
}
Login_data_password(password)
{
this.setState({password:password.target.value})
}
MainRedirect()
{
window.location = '/main';
}
api_call_login(e)
{
e.preventDefault()
console.log(this.state.password,this.state.username)
Supers.post('http://127.0.0.1:8000/user_ops/user_login/')
.send({'username':this.state.username,'password':this.state.password})
.end((error, response) =>
{
if(!error && response)
{
console.log(JSON.parse(response.body))
console.log('Object')
console.log(Object.keys(JSON.parse(response.body)))
this.setState({API_Data:JSON.parse(response.body)})
if(this.state.API_Data['Successful_Login']==='True')
{
this.setState({'username':'','password':''})
console.log('Switching')
//superagent_arguments
//.set('Authorization',this.state.API_Data['token'])
//.set('Content-Type','application/json')
//console.log(superagent_arguments)
this.MainRedirect()
}
else
{
this.setState({'username':'','password':''})
window.location='/login'
}
}
});
}
render(){
return(
<div>
<div id="container">
<form method="POST">
<legend id= "login_legend"><b>Login Form</b></legend>
<label htmlFor="username">Username:</label>
<input type="text" id="username" name="username" onChange={this.Login_data_username} placeholder="Username"/>
<label htmlFor="password">Password:</label>
<input type="password" id="password" name="password" onChange={this.Login_data_password} placeholder="Password"/>
<input type="submit" value="Login" onClick={this.api_call_login}/>
</form>
</div>
</div>
)
}
}
export default Login
您在两个组件中使用具有相同ID的输入标记，并且因为id只能用于一个元素，HTML只能识别具有该id的最新元素。
现在来看看你的代码：
// Register.js
<label htmlFor="username">Username:</label>
<input type="text" id="username" name="username" onChange={this.change_username} placeholder="Username"/>
<label htmlFor ="email">Email Id:</label>
<input type="text" id="email" name="Email" onChange={this.change_email} placeholder="Email Id"/>
<label htmlFor="password">Password:</label>
<input type="password" id="password" name="password" onChange={this.change_password} placeholder="Password"/>
// Login.js
<label htmlFor="username">Username:</label>
<input type="text" id="username" name="username" onChange={this.Login_data_username} placeholder="Username"/>
<label htmlFor="password">Password:</label>
<input type="password" id="password" name="password" onChange={this.Login_data_password} placeholder="Password"/>
你已经在输入标签的id上设置了username和password字样2次，因此，只有Login.js文件中的最新单词才有效。