Comment désactiver conditionnellement une entrée de formulaire dans react?

Question

Je voudrais désactiver l'entrée validée si un élément répond à certains critères. Dans ce cas, si un produit a une promotion.

Idéalement, je voudrais faire quelque chose comme ça:

<ValidatedInput
  className='product-dropdown'
  onChange={this.onProductChange.bind(this)}
  defaultValue={example.product_id}
  componentClass='select'
  name='product_id'
  placeholder='select'
  disabled={isDisabledInput}
 >

isDisabledInput {
  if(example.has_a_promotion) {
     return true
  }
}

J'utilise react-bootstrap-validation.

Answer 1

Cela n'a en fait rien à voir avec la réaction "à dire".

J'ai changé example pour utiliser les composants state cela signifie que ValidatedInput sera rendu à chaque fois que l'état est changé. Cela pourrait ne pas être réellement nécessaire si example.has_a_promotion est correct lorsque le composant est rendu. Veuillez donc changer en conséquence.

disabled n'est en fait qu'une propriété transmise au composant ValidatedInput. Ce qui signifie que sa valeur est identique à celle de tout autre js exécuté quand il est entouré de {}... donc une simple instruction if fera l'affaire.

 render(){
  return(    
     <ValidatedInput
       className='product-dropdown'
       onChange={this.onProductChange.bind(this)}
       defaultValue={example.product_id}
       componentClass='select'
       name='product_id'
       placeholder='select'
       disabled={this.state.example.has_a_promotion === true ? true : false}
      />
   );
 }