为什么React会用最后一个键盘输入预先填充输入标签

Why does React pre-populate input tags with the last keyboard input?

本文关键字：输入 填充 标签 键盘 React 最后一个 为什么      更新时间：2023-09-26

我创建了一个包含在div中的输入标记列表，以生成一个可编辑的文本列表。

但是，当我通过点击Enter向该列表添加新元素时，新的空元素会自动填充最后一个键盘输入，而不是空白。

以下是JsBin描述问题的链接：

https://jsbin.com/kovipurace/edit?html，输出

我希望输入为空。

有没有一种方法可以正确地实现预期行为？

我最初是基于react教程中的CommentForm编写代码的，但我故意不使用form标记来更清楚地使用回车键（不想乱用e.preventDefault（）等）。我还在实际版本中添加了额外的功能，允许使用onBlur事件更新现有值。

我尝试过的：

我已经（希望是正确的！）实现了文档中所述的受控组件。

我尝试过使用defaultValue和而不是value，但效果是一样的。在这两种情况下，我都使用{this.props.value}

使用textEntry文本创建新的文本条目。

keyHasBeenPressed : function(e) {
    if (e.keyCode == 13) {
      var textEntry = this.refs.textEntry.value;
      this.props.createEntry(textEntry);
    }      
},

您所需要的只是将createEntry的参数设为空白。

this.props.createEntry();

https://jsbin.com/daqura/1/edit?html，输出

我在#reactjs IRC频道和评论上找到了帮助。

在keyHasBeenPressed函数中，需要再次显式设置状态，就像在handleChange中一样。

getInitialState只用于在组件的生命周期中初始化状态一次。

相关文章：