你如何有条件地禁用反应中的表单输入？

Question

如果某个项目符合某个条件,我想禁用经过验证的输入.在这种情况下,如果产品有促销.

理想情况下,我想做这样的事情:

<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
  }
}

我正在使用react-bootstrap-validation.

Answer 1

这实际上与`per-say的反应毫无关系.

我已经改变example使用组件state这将意味着ValidatedInput只要状态改变就会重新渲染.如果在渲染组件时example.has_a_promotion正确,则实际上可能不需要这样做.所以请相应更改.

disabled实际上只是传递给ValidatedInput组件的属性.这意味着它的值就像其包装的任何其他js一样{}...所以一个简单的if语句就可以了.

 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}
      />
   );
 }