如何在与firebase数据库的反应中执行crud操作

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 的值，这将在您使用 handleChange 作为侦听器的任何输入中触发 onChange 时发生。

将您的 handleChange 函数更改为：

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

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

您的渲染函数有点令人困惑，但我假设您正在渲染一个带有用户名和密码标签的表单...

然后在表单中的输入中（我在上面的降价中看不到，但我假设在登录组件中）：

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