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

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

1 个答案: