Question

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

但是，当我按Enter键将新元素添加到此列表时，新的空元素将自动填充最后一个键盘输入，而不是空白。

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

https://jsbin.com/kovipurace/edit?html,output

我期待一个空输入。

有没有办法正确实现预期的行为？

我最初在反应教程中将我的代码基于CommentForm，但我故意不使用表单标签来更清楚地使用Enter键（不想使用e.preventDefault（）我还在实际版本中添加了其他功能，以允许使用onBlur事件更新现有值。

我尝试了什么：

我已经（正确，希望！）实施了控制组件，如文档中所述。

我已尝试使用defaultValue而不是值，但效果是相同的。在这两种情况下，我都在使用{this.props.value}

Answer 1

使用textEntry文本创建新的textentries。

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

您只需要将createEntry的args设为空白。

this.props.createEntry();

https://jsbin.com/daqura/1/edit?html,output

Answer 2

我在这里找到了#reactjs IRC频道和评论者的帮助。

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

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

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

2 个答案: