Reactjs 当用户可以键入用户名或电子邮件时，如何更新正确的字段？

我正在rails中使用react/redux开发一个应用程序，我有一个文本框，可以接受用户名或电子邮件。在下面帖子的帮助下，我尝试了添加另一个函数来处理电子邮件/用户名输入的解决方案。但是现在我似乎无法在文本框中键入

@

字符（而且

@

字符似乎被附加到我为昵称键入的任何内容中，并被设置为用户的电子邮件）。进行这种过滤的正确方法是什么

更新：我已经将问题缩小到我的

handleLoginInput

函数，特别是设置

字段

变量的第一行；逻辑对我来说很有意义，但由于某种原因，我无法在文本字段中键入

@

，这使得它无法将值保存到正确的字段中。但是当我注释掉

let field=…

并手动将

username

字段放入

this.setState…

行下面的

字段变量时，它起作用（用于设置username字段）；但是，当我尝试对
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>


这个.handleLoginInput（e）}
className=“登录输入”
占位符={formType==='登录'？“电子邮件地址或用户名”：
“电子邮件”}
/>
您不能使用
一旦更改
这样，您需要先
设置状态

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>

handleLoginValue（e）{
let field=e.currentTarget.value.includes（“@”）？“电子邮件”：“用户名”
this.setState（{[field]：e.currentTarget.value}）；
}
//渲染
this.handleLoginValue（e）}
className=“登录输入”
占位符={formType==='登录'？“电子邮件地址或用户名”：“电子邮件”}
/>
提交
你有提交按钮吗？是的，这段代码来自我正在制作的表单（有提交按钮）；只是不想粘贴一堆代码/使问题更难阅读！啊，好的，如果我理解正确，首先我需要将它保存到状态中，作为
loginInput
。然后，当用户点击提交按钮时，
onSubmit
函数处理更新右侧字段？嗯，实际上，让我发布整个表单和我的handleSubmit函数；我想我做了类似的事情，但电子邮件和昵称仍然没有设置为用户的状态：（我会尝试一下！我只是想确定一下，但是对于值，你是指
这个.state.loginInput
？而且我刚刚意识到我在初始状态中没有
loginInput
字段；我也需要添加这个字段吗？嗯，所以我尝试了一下，无法在文本框中键入
@
：（当我尝试输入上面的电子邮件时，我将添加我的参数的快照！