如何使用React创建一个"类似"的剩余字符

Question

我正在寻找一个带有"目标字符数"的反应计数器,就像Twitter一样,它会随着用户的输入而减少.

例如,在"元描述"字段中,目标字符数为160.因此,如果字段为空,则数字为160.当用户键入时,计数会随着每个字符添加到输入字段而减少,直到它达到零.

如果计数高于目标,则数字将以红色写入,前面带有减号(再次,就像推特一样).

一种方法是在textarea上监听onChange事件,并更新组件的状态(具有textarea和计数器),然后使用它来计算长度并渲染剩余的char计数器.

有更有效的方法吗？

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