javascript - 如何使用 React 创建 “twitter like” 剩余字符数

Question

我希望为文本区域制作一个带有“目标字符数”的 react 计数器，就像 Twitter 那样，随着用户输入而减少。

例如，在“元描述”字段中，目标字符数为 160。因此，如果该字段为空，则数字将为 160。随着用户键入，计数会随着添加到字符中的每个字符而减少。输入字段直到达到零。

如果计数高于目标，数字将以红色书写，前面有一个减号(同样，就像 Twitter 一样)。

实现此目的的一种方法是监听 textarea 上的 onChange 事件，并更新组件的状态(具有 textarea 和计数器)，然后使用它来计算长度并渲染剩余的字符计数器。

有没有更有效的方法？

Answer 1

这是您想要的粗略版本。当 chars_left 低于零时不处理，但应该很容易实现。

var TwitterInput = React.createClass({
    getInitialState: function() {
        return {
            chars_left: max_chars
        };
    },
    handleChange(event) {
        var input = event.target.value;
        this.setState({
            chars_left: max_chars - input.length
        });
    },
    render: function() {
        return (
            <div>
                <textarea onChange={this.handleChange.bind(this)}></textarea>
                <p>Characters Left: {this.state.chars_left}</p>
            </div>
        );
    }
});

https://jsfiddle.net/terda12/b0y4jL6t