Question

我正在尝试并尝试错误。我试图通过事件处理使用reactjs在数据库中插入用户名和密码，但是每当我输入用户名和密码时，这两个字段都会得到相同的值。例如，如果我将“ ABC”作为用户名，将123作为密码，则用户名和密码将在数据库中获得相同的值123。

1。尝试使用事件处理插入数据。

class Login extends Component{

    ref = firebase.firestore().collection('login');
    state = {
      username: '',
      password: ''
    };


  handleChange = (event) => {
    const state = this.state
    state.username = event.target.value;
    state.password=event.target.value;
    //console.log(state[event.target.username]);
    //console.log(state[event.target.password]);
    this.setState({username:state.username,
               password:state.password });
               console.log(state.username);
               console.log(state.password);
  }


  onSubmit = (event) => {
    event.preventDefault();
    const { username,password } = this.state;

    this.ref.add({
      username,
      password
    }).then((docRef) => {
      this.setState({
        username: '',
        password:''
      });
      this.props.history.push("/")
    })
    .catch((error) => {
      console.error("Error adding document: ", error);
    });
  }
render()
{
    return(
        <form onSubmit={this.onSubmit}>
        <div className="container mt-5 w-50">
            <div className="form-group">
            <label for= "user name" className="">User Name:</label>
            <input type="text" name="userName" placeholder="UserName" className="form-control w-50" onChange={this.handleChange.bind(this)}/><br/>
            <label for="password" className="">Password:</label>
            <input type="password" name="password" placeholder="password" className="form-control w-50" onChange={this.handleChange.bind(this)}/><br/>
            <button name="Login" className="btn btn-success w-50 mb-3">Login</button><br/>
            {/* <a href="www.google.com" className="ml-5">Don't Have an Account? SignUp</a> */}

                <Link to="/signup">Don't Have an Account? SignUp</Link>
            </div>

         </div>
         </form>
    );
  }
}
export default Login;

用户名和密码应获取其实际值。

Answer 1

我相信这是因为您正在事件处理程序中将两者的状态都设置为相同的值（event.target.value）。您还会改变状态，这在任何情况下都不是一件好事。

在handleChange函数中，您正在将用户名和密码状态值更改为event.target.value的值，这将在onChange触发时发生，无论您使用handleChange作为侦听器的输入是什么。

将handleChange函数更改为此：

handleChange = event => {
    let {name, value} = event.target;
    this.setState({
        [name]: value
    });
}

在事件以{[name]: value}触发输入时使用name="password"，组件状态下的密码值将更新

您的渲染功能有点混乱，但是我要假设您正在渲染带有用户名和密码标签的表单...

然后在表单中的输入中（我在上面的标记中看不到，但我假设是在“登录”组件中）：

<input name="username" value={this.state.username} onChange={this.handleChange} />
<input name="password" value={this.state.password} onChange={this.handleChange} />

如何在Firebase数据库中执行Crud操作

1 个答案: