Iga Iga - 2 months ago 10
React JSX Question

How to pass disabled attribute to some elements in react classes?

I wanted to make universal input-class using reactjs-bootstrap and to use it in my form. Code of my class:

const TextField = React.createClass({
render: function () {
var label = (this.props.label != null) ? this.props.label : "";
var name = (this.props.name != null) ? this.props.name : "";
var value = (this.props.value != null) ? this.props.value : "";
return (
<FormGroup>
<ControlLabel>{label}</ControlLabel>
<FormControl type="text" placeholder={label} name={name}
value={value} onChange={this.props.onChange}
/>
<FormControl.Feedback />
</FormGroup>
);
}
});


In my form-class I use it so:

<div className="col-md-3">
<TextField label="Label"
name='label_id'
value={data.label_id} />
</div>


In my form i have some inputs, which must be dissabled. In documentation i saw that exists attribute
dissabled
, but when I write:

<div className="col-md-3">
<TextField label="Label"
name='label_id'
value={data.label_id}
dissabled />
</div>


it doesn't works. I think this is because of universal
TextField
-class. How can I fix this problem in my case?If I specify dissabled-atribute in parent-class, all inputs become dissabled..

Answer

Pass a disabled prop to your TextField, which you did already, and consume it by FormControl which supports disabled prop according its usage.

<FormControl
  type="text"
  placeholder={label}
  name={name}
  value={value}
  disabled={this.props.disabled}   <-- this disables the text input.
  onChange={this.props.onChange}
/>
Comments