Не удается ввести ответное текстовое поле ввода - onChange не работает должным образом

Question

Я работаю с ReactJS и следую учебному пособию для создания страницы входа, в примере код очень интуитивно понятен и универсален, я пытаюсь эмулировать функцию для получения значений из входов электронной почты и пароля, но когда я пишу текст сразу заменить на пустую строку.

Я уже прошел похожие посты и обнаружил, что логика более сложна, и в этом нет необходимости. Я хотел бы иметь что-то простое, как это DEMO .

Я пытался добавить идентификаторы в разные компоненты, чтобы проверить, работает ли он, я не могу заставить его работать.

Это код:

class LoginLayout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
  }
  onUserLogin() {
    if (this.state.email !== "" && this.state.password !== "") {
      this.props.loginUser(this.state, this.props.history);
    }
  }
  handleChange = event => {
    this.setState({
      [event.target.id]: event.target.value
    });
  }
  render() {
    return (
      <Fragment>
        <Form>
          <Label className="form-group has-float-label mb-4" id="inputEmail">
            <Input type="email"
              value={this.state.email}
              onChange={this.handleChange}
            />
          </Label>
          <Label className="form-group has-float-label mb-4">
            <Input type="password" id="inputPassword"
              value={this.state.password}
              onChange={this.handleChange}
            />
          </Label>
          <div className="d-flex justify-content-between align-items-center">
            <NavLink to={`/forgot-password`}>
              <IntlMessages id="user.forgot-password-question" />
            </NavLink>
            <Button
              color="primary"
              className="btn-shadow"
              size="lg"
              onClick={() => this.onUserLogin()}
            >
              <IntlMessages id="user.login-button" />
            </Button>
          </div>
        </Form>
      </Fragment>
    );
  }
}
const mapStateToProps = ({ authUser }) => {
  const { user, loading } = authUser;
  return { user, loading };
};

export default connect(
  mapStateToProps,
  {
    loginUser
  }
)(LoginLayout);

Answer 1

Добавьте id свойство со значением «email» к вашему входу электронной почты и измените значение идентификатора «inputPassword» на «пароль».

Это так, что [event.target.id] ключ динамического свойства разрешает значения в вашем обработчике изменений, совпадают с именами свойств «email» и «password» структуры состояния ваших компонентов.

В настоящее время в противном случае выустанавливают состояние inputPassword вместо пароля, но указывают свойство входного управляемого значения на пароль, который не обновляется из-за несоответствия.Кроме того, электронная почта не имеет видимого свойства идентификатора, поэтому она будет оцениваться как неопределенная в терминах event.target.id.

Надеюсь, это поможет!