React Jsの入力時に文字制限を表示する

Question

反応入力コンポーネントを作成していて、入力の下に文字数制限を表示する必要があります（残りの0/500文字）。私は入力コンポーネントに小道具としてmaxLengthを渡しましたが、限界に達する前に残りの文字数を表示する方法がわかりません。

最大長は正しく機能します - 残りの文字数（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> 
     ); 
    } 
}