Convalida Bootstrap La convalida utilizza l'input convalidato nel componente secondario

Question

Sto utilizzando react-bootstrap-validation che decora il tag di input reacst-bootstrap.

ValidatedInput richiede che si trovi all'interno di un componente Form. Quando aggiungo il mio ValidatedInput a un componente secondario personalizzato, ricevo un errore che dice che deve essere all'interno di un modulo che è, ma suppongo che ora sia più in basso nell'albero quindi non può vedere il modulo.

C'è un modo per fare riferimento al Form padre in modo che ValidatedInput possa vedere il genitore.

Guardando all'origine della libreria di validazione, posso vedere che ValidationInput deve registrarsi al modulo ma non sono sicuro di come farlo dal componente secondario.

// Parent render 
 
render(){ 
 
    <Form 
 
    className="fl-form fl-form-inline fl-form-large" 
 
    name="customer-details" 
 
    onValidSubmit={this._handleValidSubmit} 
 
    onInvalidSubmit={this._handleInvalidSubmit} 
 
    validationEvent='onChange'> 
 
    
 
    <TitleSelect handleChange={this.updateDropDown} value={this.state.form.title} /> 
 
     
 
    </form> 
 
} 
 

 

 
// Sub class containing the ValidatedInput 
 
export class TitleSelect extends React.Component { 
 

 
    static propTypes = { 
 
     handleChange: React.PropTypes.func.isRequired, 
 
     value: React.PropTypes.string.isRequired 
 
    } 
 

 
    render(){ 
 

 
     return (
 
      <ValidatedInput 
 
      name="title" 
 
      label='title' 
 
      type='select' 
 
      value={this.props.value} 
 
      onChange={this.props.handleChange} 
 
      groupClassName='form-group input-title' 
 
      wrapperClassName='fl-input-wrapper' 
 
      validate='required' 
 
      errorHelp={{ 
 
       required: 'Please select a title.' 
 
      }}> 
 

 
      <option value="" ></option> 
 
      <option value="Mr">Mr</option> 
 
      <option value="Mrs">Mrs</option> 
 
      <option value="Master">Mstr.</option> 
 
      <option value="Ms">Ms</option> 
 
      <option value="Miss">Miss</option> 
 
      <option value="Reverend">Rev.</option> 
 
      <option value="Doctor">Dr.</option> 
 
      <option value="Professor">Prof.</option> 
 
      <option value="Lord">Lord</option> 
 
      <option value="Lady">Lady</option> 
 
      <option value="Sir">Sir</option> 
 
      <option value="Master">Mstr.</option> 
 
      <option value="Miss">Miss</option> 
 
      </ValidatedInput> 
 
     ) 
 
    } 
 
};

Answer 1

Sa @ Ваня Решетников detto sopra è impossibile farlo ora a causa delle limitazioni del design attuale. Una soluzione per cui sono andato è questa.

1. Converti sottocomponente di pianura oggetto JS

   TitleSelect = { 
       // move prop types to parent 
       renderTitleSelect(){ 
       ... 
       } 
   } 
   

2. Aggiungi nuovo oggetto come mixin per genitore e rendere una funzione

   mixins: [TitleSelect], 
   ... 
   render() { 
       <Form ...> 
       // parentheses are important! 
       {this.renderTitleSelect()} 
       </Form> 
   } 
   

Answer 2

Al momento questo è impossibile da fare. Sarà possibile in una versione futura una volta che avremo adeguati contesti basati sui genitori in risposta e migrerò il componente in contesti. Ma per ora consiglierei di dividere il tuo metodo render() in un paio di quelli più piccoli e riutilizzarli.