我正在创建一个 react 输入组件,需要显示输入 ex 下面的字符限制:(剩余 0/500 个字符)。我已将 maxLength 作为 Prop 传递到输入组件中,但不确定如何显示达到限制之前剩余的字符数。
最大长度正常工作 - 如何添加显示剩余字符数的视觉反馈(2/500 个字符...等)。
<input
{...customAttributes}
maxLength={maxLength}
required={required}
/>
然后我像这样调用我的组件:
<InputComponent maxLength={10} />
最佳答案
该问题没有足够的信息来正确回答,但根据对评论的 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>
);
}
}
关于javascript - 在 React Js 中显示输入下的字符限制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44349052/