Question

我有两组表单：一组用于登录，另一组用于用户注册。它们都有自己的组件，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

Answer 1

您在两个组件中使用具有相同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 2次上设置了username和password个字词，因此，只有Login.js文件中的最新字才能生效。

只有一种形式在反应中一次工作

1 个答案: