javascript - 在 React Js 中显示输入下的字符限制

Question

我正在创建一个 react 输入组件，需要显示输入 ex 下面的字符限制:(剩余 0/500 个字符)。我已将 maxLength 作为 Prop 传递到输入组件中，但不确定如何显示达到限制之前剩余的字符数。

最大长度正常工作 - 如何添加显示剩余字符数的视觉反馈(2/500 个字符...等)。

<input
    {...customAttributes}
    maxLength={maxLength}
    required={required}
/> 

然后我像这样调用我的组件:

<InputComponent maxLength={10} />

Answer 1

该问题没有足够的信息来正确回答，但根据对评论的 react ，类似这样的内容应该有效:

<div>
    {this.props.maxLength - this.state.whateverYouNamedTheValue.length}/{this.props.maxLength}
</div>

在组件的上下文中，用 ES6 进行了一些清理:

class InputComponent extends React.Component {
    // ... class and state stuff ...
    render() {
        const { maxLength } = this.props;
        const { whateverYouNamedTheValue } = this.state;

        return (
            <div>
                <input
                    {...customAttributes}
                    maxLength={maxLength}
                    required={required}
                />
                { whateverYouNamedTheValue ? (
                    <div>
                        ({ maxLength - whateverYouNamedTheValue.length }/{ maxLength })
                    </div>
                ) : null }
            </div>
        );
    }
}