Как я могу обновить правильное поле, когда пользователь может ввести имя пользователя или адрес электронной почты?

Question

Я работаю над приложением в рельсах с использованием response / redux, и у меня есть одно текстовое поле, которое может принимать имя пользователя или электронную почту. С помощью поста ниже я попробовал решение добавить еще одну функцию для обработки ввода адреса электронной почты / имени пользователя. Но похоже, что теперь я не могу набрать символ @ в текстовое поле (и кажется, что символ @ добавляется к тому, что я набираю для псевдонима, и задается в качестве электронного письма пользователя). Как правильно выполнять такую ​​фильтрацию?

Обновление: я сузил проблему до своей функции handleLoginInput, в частности, первой строки, которая устанавливает переменную field; логика c имеет смысл для меня, но по какой-то причине я не могу набрать @ в текстовом поле, что делает невозможным сохранение значения в правильном поле. Но когда я закомментирую let field=... и вручную введу в поле username переменную field в строке this.setState... под ней, это сработает (для установки поля имени пользователя); однако, когда я пытаюсь сделать то же самое для поля email, я вообще не могу набрать текстовое поле.

  handleLoginInput(e) {
    let field = e.currentTarget.value.includes('@') ? 'email' : 'username';
    this.setState({ [field]: e.currentTarget.value });
  }

// в моей форме

<label>
  <input type="text"
    value={ this.state.username }
    onChange={ e => this.handleLoginInput(e) }
    className="login-input"
    placeholder={ formType === 'Log In' ? "Email address or username" : 
    "Email" }
  />
</label>

Answer 1

Вы не можете использовать onChange таким образом, вам нужно setState сначала

handleLoginValue(e) {
  let field = e.currentTarget.value.includes('@') ? 'email' : 'username'
  this.setState({[field]: e.currentTarget.value});
}


//render
<input type="text"
  value={this.state.username}
  onChange={e => this.handleLoginValue(e)}
  className="login-input"
  placeholder={formType === 'Log In' ? "Email address or username" : "Email"}
/>

<button onClick={this.onSubmit}>
  Submit
<button>