ダイナミックフォームの検証が

Question

私はそれ以下

const BILL_NUMBER = [ 
{ 
    "caseIndex": "Bill Number", 
    "minLength":"3", 
    "maxLength": "16", 
    "htmlControlType": "text", 
    "errorMessage": "Alphanumeric Only", 
    "idxReglrExp":"^[a-zA-Z0-9_\\s]*$", 
    "cssClassName":"form-control" 
} 
]; 

内のすべてのフィールドプロパティとJSON下回っているのはJSONデータをレンダリングするための機能であり、フィールドがページ

に表示なっています

renderBillNumber: function() { 

    const data = BILL_NUMBER; 
    return data.map(group => { 
     return <div> 
       <label for="billnumber">{group.caseIndex}</label> 
            <input type={group.htmlControlType} className={group.cssClassName} id="billnumber" placeholder=""/> 
            </div> 
    }); 

}, 

このフィールドを、minlength、maxlengthなどのjsonのプロパティで検証し、正規表現に基づいてエラーメッセージを表示したいとします。

私はreactjsでこれを行う方法を教えてもらえますか？

Answer 1

あなたはあなたのためのチェックを行いますonChangeプロパティを追加する必要があります。

renderBillNumber: function() { 
    const data = BILL_NUMBER; 
    return data.map(group => 
    <div> 
     <label for="billnumber">{group.caseIndex}</label> 
     <input 
     onChange={(e) => this.handleChange(e, group)} 
     type={group.htmlControlType} 
     className={group.cssClassName} 
     /> 
    </div> 
    }); 
}, 
handleChange(event, group) { 
    const value = event.target.value; 
    if (value.length < group.minLength) { 
    // do what you want to do if value is too small 
    } 
    // all you want to check 
} 

Answer 2

これを行うには、各入力の状態を把握する必要があります。ここで考えているのは、あなたのJSONにX金額の請求番号があるということで、あなたの状態にエラーがあるものだけを追跡するのが理にかなっているかもしれません。

あなたはまずそのように検証関数を作成することがあります：ユーザーがテキストを入力するたびに、あなたの関数が呼び出されるように、そして、あなたはrenderBillNumber機能を編集することができ、

validateText(evt){ 
// Get the current user input for this input box 
const userInput = evt.target.value; 

// Grab the current errors state 
const errors = this.state.errors || {}; 

// Cycle through your JSON to get the data you need 
BILL_NUMBER.forEach(bill => { 

    // If this is the right bill, then get the validation data we need. 
    if (bill.caseIndex === evt.target.name){ 
     const minLength = bill.minLength; 
     const maxLength = bill.maxLength; 
     const re = bill.idxReglrExp; 
     if (userInput.length >= minLength && 
      userInput.length <= maxLength && 
      userInput.match(re)){ 
       //We're valid - cycle through state & remove error if it's there. 
     } else { 
      // Add this caseIndex to your state: 
      this.setState({ 
       errors: { 
        ...errors, 
        bill.caseIndex: true 
       } 
      }); 
     } 
    } 
}); 

}

を。また、あなたの入力を参照する "name"属性を追加するか、それと同様にassign a refを追加することができます。これにより

renderBillNumber: function() { 

const data = BILL_NUMBER; 
return data.map(group => { 
    if (this.state.errors[caseIndex]){ 
     return (
      <div>error</div> 
     ); 
    } 
    return (
     <div> 
      <label for="billnumber">{group.caseIndex}</label> 
      <input name={group.caseIndex} onInput={this.validateText} type={group.htmlControlType} className={group.cssClassName} id="billnumber" placeholder=""/> 
     </div> 
    ) 
}); 

}

ユーザーが何かを入力すると、validateTextが呼び出されます。状態が変更された場合、請求書は適切なビジュアルで再レンダリングされます。