React - ES6 - 动态观察textarea的总字符长度

Question

请查看此simple fiddle。

它是一种单一的反应成分，是一种textarea。它在textarea下方显示一个计数器。

目标是让计数器更新onChange以反映新值（总文本区域长度）。

不幸的是，只要发生变化，我的计数器就会消失。我怀疑我的this或语法在此代码块的中间是专门关闭的：

recalculate() {
  this.setState({
    text: this.state.text.length
  });
}

但是React是一个新的野兽，ES6也是如此。我在这里缺少什么？

Answer 1

您应该使用新值设置state，因为现在您始终设置默认state值

recalculate(e) {
  this.setState({
     text: e.target.value
  });
}

Example

Answer 2

问题在于重新计算功能。您需要setState新的textarea值。像下面这样的代码应该修复它

recalculate({target: {value}}) {
  this.setState({
    text: value
  });
}

Here是一个带有工作代码的JSfiddle

Answer 3

您想要更新文本框的值。尝试使用e.target.value作为州。

https://jsfiddle.net/Lz5v8gq9/3/

Answer 4

你的问题是你依靠this.state.text来填充你的textarea。键入并调用recalculate（）后，将this.state.text更改为int，然后尝试在此int上调用.length，这会导致值未定义。我建议这样做：https://jsfiddle.net/74jufckm/1/

double*

重新计算时，您再也没有设置文本的状态。