как выполнить грубую операцию в соответствии с базой данных Firebase - PullRequest
Новая
       34

как выполнить грубую операцию в соответствии с базой данных Firebase

0 голосов
/ 30 октября 2019

Я пытаюсь методом проб и ошибок. Я пытался вставить имя пользователя и пароль в базу данных с помощьюactjs путем обработки событий, но всякий раз, когда я вводил имя пользователя и пароль, оба поля получали одно и то же значение. Например, если я введу «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;

имя пользователя и пароль должны получить их фактические значения.

1 Ответ

2 голосов
/ 30 октября 2019

Я полагаю, это потому, что вы устанавливаете состояние обоих в одно и то же значение (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} />
...