Question

我正在尝试创建一个计数器来计算剩余字符，但我不能。我想将允许的字符数设置为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。有什么建议吗？

Answer 1

您不必计算其余字符。在使用纯textarea标签的实现中，您可以使用maxlength属性指定允许的最大字符数，如下所示：

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

Answer 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?

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

2 个答案: