Wie wird das deaktivierte Attribut an einige Elemente in den Reaktionsklassen übergeben?

Question

Ich wollte Universal Input-Klasse mit reactjs-Bootstrap machen und es in meiner Form verwenden. Code meiner Klasse:

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 meiner Form-Klasse Ich benutze es so:

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

In meiner Form habe ich ein paar Eingänge haben, die dissabled werden müssen. In der Dokumentation sah ich, dass Attribut vorhanden dissabled, aber wenn ich schreibe:

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

es nicht funktioniert. Ich denke, das ist wegen der universellen TextField-Klasse. Wie kann ich dieses Problem in meinem Fall beheben? Wenn ich dissabled-atribute in Eltern-Klasse angeben, werden alle Eingänge werden barrierenfreier ..

Answer 1

Pass eine disabled prop zu Ihrem TextField, die Sie bereits haben, und verbrauchen sie durch FormControl die unterstützt disabled Prop nach seiner Verwendung.

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