ReactJS ES6 限制文本区域中的行和字符

Question

我正在寻找一些方法来限制带有 react 和 es6 的文本区域的行数和字符数。我找到了一些方法，但它们并不真正适用于所有浏览器，例如 e.key，我可以在其中限制一行的字符数。我想要一个文本区域，每行只能有 5 行和 40 个字符。

应该是

Line 1 -> 1234567890123456789012345678901234567890
Line 2 -> 1234567890123456789012345678901234567890
Line 3 -> 1234567890123456789012345678901234567890
Line 4 -> 1234567890123456789012345678901234567890
Line 5 -> 1234567890123456789012345678901234567890

我已经尝试过的：

add(event){
    let allowedLines = 4;
    let lineLength = 40;
    let maxTextLength = 200;

    if(!(this.state.textAreaValue.length % lineLength)){
        this.setState({
            textAreaValue: this.state.textAreaValue + "\n"
        });
    }

    let maxLines = this.state.textAreaValue.split("\n");
    if(this.state.textAreaValue < maxTextLength
        && maxLines.length <= allowedLines){

        this.setState({
            textAreaValue: this.state.textAreaValue + event.key
        });
    }
}
render(){
    let textValue = this.state.textAreaValue;
    return (
        <textarea className="textArea-big" id="textarea" rows="5" cols="40"
        placeholer="some placeholer here" onKeyPress={this.add} value={textValue} />
    );
}

我希望有人能帮我解决这个问题。谢谢

Answer 1

好吧，找到了解决方案，但我认为可能还有更好的方法。这是我的解决方案：

setTextAreaFormat() {
    let lines = [];
    let text = "";
    let maxLines = 5;
    let maxTextForLine = 40;
    text = document.getElementById("textarea").value;

    if(text.length >= maxTextForLine){
        lines = text.match(/.{1,35}/g);
    }
    if(lines.length > maxLines){
        lines.length = maxLines;
    }
    if(lines.length > 0){
        document.getElementById("textarea").value = lines.join("\n");
    } else {
        document.getElementById("textarea").value = text;
    }
}

ReactJS ES6 限制文本区域中的行和字符

ReactJS ES6 limit lines and characters from a textarea

javascript

textarea

rows

ecmascript-6

reactjs