如何创建一个计算剩余字符的计数器？答案

【问题标题】：How to create a counter that calculates the remaining characters?如何创建一个计算剩余字符的计数器？
【发布时间】：2019-11-24 13:00:31
【问题描述】：

我正在尝试创建一个计数器来计算剩余字符，但我做不到。我想将允许的字符设置为 100，然后从 100 中减去用户写入的字符数，我写了这个


    class TextArea extends Component
    {

        state =
        {

            chars: 0,

        }

        charsRemaining()
        {

            var myTextArea = document.querySelector("textarea").value.length;


            this.setState({chars: this.state.chars - myTextArea});

            return myTextArea;
        }

        render()
        { 

            return (

                <div>

                    <textarea onKeyDown={this.charsRemaining()} cols="60" rows="10"></textarea>

                    <span>{this.state.chars}</span>

                </div>

            );

        };

    };

我想如果我将一个变量设置为document.querySelector("textarea").value.length 就可以了。但似乎我无法在 ReactJS 中以这种方式访问元素 DOM。有什么建议吗？

【问题讨论】：

您的问题得到解答了吗？

标签： javascript reactjs dom textarea

【解决方案1】：

您不必计算剩余的字符。使用带有纯 textarea 标记的实现，您只需使用 maxlength 属性来指定允许的最大字符数，如下所示：

<textarea maxLength="100" cols="60" rows="10"></textarea>

【讨论】：

我知道，但我想像 Twitter 一样向用户展示它。

【解决方案2】：

其中一个问题可能是您通过将() 放在末尾来执行函数。因此，不是将值设置为函数，而是将值设置为函数的结果。

所以不要这样：

onKeyDown={this.charsRemaining()}

试试这个：

onKeyDown={this.charsRemaining}

您可能会尝试的另一件事是使用传递给函数的合成事件来获取值长度。

charsRemaining( e ) {
    var myTextAreaLength = e.target.value.length;
    this.setState({chars: this.state.chars - myTextAreaLength});
}

我认为您为 React 构建组件的方式存在其他问题。您可能想找到一个工作反应组件的教程，以及它们如何设置初始状态以及将函数绑定到事件。或者看看这个问题的答案：How to get input textfield values when enter key is pressed in react js?

【讨论】：