Question

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

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

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

然后我这样称呼我的组件：

<InputComponent maxLength={10} />

Answer 1

问题没有足够的信息可以正确回答，但根据对评论的反应，这样的事情应该有效：

<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>
        );
    }
}

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

1 个答案: