reactjsの文字数を制限する

Question

シリアルナンバーを入力する必要がある入力ボックスがあります。最大文字数は32で、文字数が32に達すると文字化けが止まるはずです。方法は機能していません。最初の方法は、いくつかのパターンが定義されているカスタム関数で状態を更新しようとしました。 2番目の方法は、私は小道具としてテキストフィールドコンポーネントでパターンを渡そうとしました。コンポーネントはreact-mdlであり、パターンが一致しないとエラーを表示します。

iは最初のテキストフィールドの例を（

<Textfield 
    onChange={(event)=> {this.handleInputChange(event)}} 
    pattern="-?[0-9]*(\.[0-9]+)?" 
    error="Input is not a number!" 
    label="Device Serial Number" 
    floatingLabel 
/> 

<Textfield 
    onChange={(event)=> {this.handleInputChange(event)}} 
    pattern="-?[0-9]*(\.[0-9]{6,32})?" 
    error="Input is not a number!" 
    label="Device Serial Number" 
    floatingLabel 
/> 

最初の方法に、デフォルトで支柱としてTextFieldコンポーネントに渡されるパターンを変更しよう

第二の方法）

const extract = (str, pattern) => (str.match(pattern) || []).pop() || ''; 

const extractPattern = (str) => extract(str, "-?[0-9]*(\.[0-9]+)?"); 

const limitLength = (str, length) => str.substring(0, length); 


export default class App extends Component { 
    constructor(props){ 
    super(props); 
    this.state = {max_char:32, limit:{}}; 
    this.handleChange = this.handleChange.bind(this); 
    } 


    handleChange(charLength){ 
     console.log('charLength',charLength); 
     this.setState({ 
     max_char:32 - charLength.length, 
     limit:limitLength(extractPattern(charLength), 32), 
     }); 
     console.log('charLength', charLength); 
     // console.log('limitLength', this.state.limit); 
    } 

Answer 1

小道具を使用すると、textAreaにmaxLengthという属性が設定されます。私は一定の値を意味しますthis.props.customLength=32. また、状態での検証は推奨しません。 あなたの状態はできるだけ最小限のデータを持つ必要があります。