Deaktivieren funktioniert nicht für Kontrollkästchen bei der Verwendung von this.props

Question

Wie mache ich das funktioniert?

<input type="checkbox" id={"delivery-" + this.props.ID} {this.props.disableIt ? 'disabled' : ''} /> 

Ich hatte erwartet, diesen Code - {this.props.disableIt? 'disabled': ''} - um ein 'disabled' Attribut auszugeben, aber es wird 'Unexpected token (102: 89)' geworfen. Aber wenn ich direkt ein statisches "deaktiviertes" Wort einfüge, funktioniert es.

Answer 1

Bei Verwendung von reagieren, disabled ist es eine Requisite, die Sie true oder setzen müssen. Wenn Sie nur die Requisite ohne Wert definieren und diese Requisite boolesch ist, wird der Wert standardmäßig auf true gesetzt. Deshalb funktioniert es, wenn Sie die Requisite manuell definieren.

<input type="checkbox" disabled={false} /> 
<input type="checkbox" disabled={true} /> 
<input type="checkbox" disabled /> 
<input type="checkbox" id={"delivery-" + this.props.ID} disabled={this.props.disableIt} /> 

Zum Beispiel:

var Example = React.createClass({ 
    getInitialState: function() { 
    return { 
     disabled: false 
    }; 
    }, 

    toggle: function() { 
    this.setState({ 
     disabled: !this.state.disabled 
    }); 
    }, 

    render: function() { 
    return (
     <div> 
     <p>Click the button to enable/disable the checkbox!</p> 
     <p><input type="button" value="Enable/Disable" onClick={this.toggle} /></p> 
     <label> 
      <input type="checkbox" disabled={this.state.disabled} /> 
      I like bananas! 
     </label> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <Example />, 
    document.getElementById('container') 
); 

Hier ist die Arbeitsbeispiel: https://jsfiddle.net/crysfel/69z2wepo/59502/

Viel Glück!