this.propsを使用している場合、無効にするとチェックボックスの機能が無効になります

Question

この作業を行うにはどうすればよいですか？ {this.props.disableIt -

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

私はこのコードを期待していましたか？ 'disabled'： ''} - 'disabled'属性を出力しますが、 '予期しないトークン（102：89）'がスローされます。しかし、静的な「無効」の単語を直接入れるだけで動作します。

Answer 1

反応を使用する場合、disabledtrueまたはfalseを設定する必要があります。値を持たない小道具を定義し、この小道具がブール値である場合、デフォルトで値はtrueに設定されます。そのため、それを手動で定義するときに機能します。例えば

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

：https://jsfiddle.net/crysfel/69z2wepo/59502/

幸運：

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') 
); 

はここで働い例です！