在 TextArea 问题中反应计数单词答案

【问题标题】：React Counting Words in a TextArea PROBLEM在 TextArea 问题中反应计数单词
【发布时间】：2021-03-27 10:31:31
【问题描述】：

这是修改后的代码。

    <textarea
      className= "textarea"
      placeholder="write the description here"
      value={this.state.input} 
      onChange={(ev) => {
        this.updateBody(ev.target.value)
        }
      }>
    </textarea>

然后我调用函数以将数据保存到 Firebase。

 updateBody = async (val) => {
    await this.setState({ input: val });
    await this.setState({ wordsCounted :val.split(' ').length });
    await this.setState({charactersCounted : val.length })
    /*assign the number of words inside the textarea to the variable wordsCounted*/
    this.update();
  };
  updateTitle = async (txt) => {
    await this.setState({ title: txt });
    this.update();
  }
  update = debounce(() => {
    this.props.noteUpdate(this.state.id, {
      title: this.state.title,
      body: this.state.input,
      /*Send the value of the var wordsCounted to Firebase*/
      wordsCounted : this.state.wordsCounted,
      charactersCounted : this.state.charactersCounted

    })
  }, 750);

问题是我不知道为什么title 和body 被保存，而wordsCounted 和charactersCounted 没有。

【问题讨论】：

标签： reactjs textarea

【解决方案1】：

解决方案在 onChange 事件的事件对象中。如果在 onChange 事件中为 textarea 中的文本长度设置状态，则可以获得字符数。如果您使用 Zunayed Shahriar 的建议来计算字数，那么状态将存储字数。但是，这里有一个错误需要修复：空格字符被视为一个单词。因此，当“你好”是一个词时，“你好”是两个词。 “hello world”也算两个字。

这是我建议的代码。请注意，我使用值状态使 textarea 成为受控输入。

import React from "react";

class App extends React.Component {
  state = { value: '', length: 0 }

  render() {
    console.log(this.state.length)

    return (
      <div>
        <h1>Hello</h1>
        <textarea value={this.state.value} onChange={(e) => {
          this.setState({ value: e.target.value })
          this.setState({ length: e.target.value.split(' ').length })
        }}></textarea>
      </div>
    )
  }
}

export default App

【讨论】：

【解决方案2】：

检查错字。

这是this.state.input.length 而不是this.state.input.lenght。

而且它不会计算字数。它会计算字符数。

因此，您必须使用 this.state.input.split(' ').length 来计算字数。

如果仍然有错误，则将组件添加到问题中。

【讨论】：

现在可以了。但是还有另一个问题：'wordsCounted' 和 'charactersCounted' 没有保存在 Firebase 中。我编辑了代码，以便您可以看到它
你能上传 react 项目或在 CodeSandbox 或 StackBlitz 创建一个最小的复制品吗？
我找到了解决方案！

【解决方案3】：

作为已接受答案的参考，请使用

this.setState({ length: e.target.value.trim().split(' ').length })

要获得正确的字数，因为末尾的空格算作一个单词。

【讨论】：