javascript - 在 react 中一次只有一种形式工作

Question

我有两套表单:一套用于登录，另一套用于用户注册。它们都有自己的组件、css 文件和路由。但令人惊讶的是，在任何给定时间点，只有登录表单即使代码是相同的，也可以工作。我什至删除了表单标签，但我提交的内容仍然没有显示。我也尝试过 p

这是两个文件的代码。

 //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"/>

您已设置 username和password输入标签 ID 上的单词 2 次 ，因此，只有 Login.js 中最新的单词文件将起作用。