空间没有触发onChange事件

Question

在我的ReactJS项目中，我有一个简单的受控输入框。当我按下空格键时，onChange事件不会触发。这是正常行为吗？我能改变它吗？

    <input
      type="text"
      onChange={(e) => {
        console.log(e.target.value + 'here');
      }}
      value={this.state.name}
    />

打字输入"test "会导致日志输出testhere，空格键甚至不会触发事件。 编辑 所以我刚刚从头开始创建了一个新项目，这不是默认行为。那么我的问题是如何诊断这个问题？（这不是我编写的代码）。

- smilebomb

---

React正在自动压缩空格。最后一个空格会被自动删除。您可以尝试按下空格并输入一些内容。 - Harish Mahamure

Answer 1

你是否正在寻找这样的解决方案？

- Shenal Meghawarna de Silva

---

是的，完全正确。它在另一个项目中可以正常工作，因此这个问题只局限于我的一个组件中，我不知道如何诊断它。 - smilebomb

嗨，朋友，要诊断您的应用程序，请使用React开发人员工具，在Chrome上有一个扩展程序，或者在VS Code中使用“Debugger for Chrome”https://www.youtube.com/watch?v=PJeNReqyH88&t=301s。 - Shenal Meghawarna de Silva

如果您仍然无法获得您要寻找的答案，请提供更多关于您问题的信息，我很乐意帮助。 - Shenal Meghawarna de Silva

Answer 2

你需要使用setState来更新变量，否则在每次事件改变时，它只会将每个字母都记录下来。

- Mohith Sai Aravind N

---

我明白了。我创建了一个特意破坏的示例来说明事件没有触发。即使代码如上所示，输入框中键入的任何文本都会显示在日志中。例如，"test"被记录为"test"输出到控制台，尽管在输入框中它仍然是空的。 - smilebomb

Answer 3

你的问题是：你将state变量分配为你的文本输入框的value，但你没有更新你的状态值，所以你的文本输入框的值永远不会改变，无论你是否键入空格或任何其他字符。

<input
  type="text"
  onChange={(e) => {
    this.setState({name: e.target.value}) // you must update the value to stat
    console.log(e.target.value + 'here')
  }}
  value={this.state.name} // here you assing the value
/>

- NoNam4

---

不，这不是问题所在。 OP问的是当事件根本没有触发时。无论如何，事件都应该被触发。我在这里添加了赏金，因为我遇到了类似的问题，但我解决了它-对我来说，以及很可能对OP也是如此，问题是一个无关的键盘监听器拦截了空格键的按下操作。 - temporary_user_name