レンダリングコンポーネントは、状態に依存するか、関数内でブロック/パスディスパッチを行います。

私がすることができます：

{isBtnEnabled ? (
     <button onClick={this.props.someDispatchedAction} /> 
    ) : (
     <button/> 
)}

それとも私が使用する必要があります。

良く、なぜあるソリューション

someCoolName =() => { 
    if(isBtnEnabled) 
    this.props.someDispatchedAction(); 
} 

... 

<button onClick={this.someCoolName}>

？

私が理解している限り、変数isBtnEnabledがあり、それが真であるかどうかによって、buttonを表示したいとします。ので、これはあなたのケースでより良いアプローチになる場合：eventハンドラを変更したい場合は

{ 
    isBtnEnabled 
    && <button onClick={this.props.someDispatchedAction} /> 
}

あなたはちょうどこのような何かを行うことができます。

<button onClick={isBtnEnabled && this.props.someDispatchedAction }/>

をしかし、あなただけのdisableにしたい場合/ enablebuttonチェックアウト@RamizWachtlerの答えは

それともこれを行うことができます。

<button onClick={this.props.someDispatchedAction} disabled={!isBtnEnabled}/>

2017-10-06 12:11:27 Nocebo

なぜデフォルトのdisabledプロパティを使用しないのですか？より良い、なぜあるソリューションonButtonClick

const {doSomething} = this.props; 

doSomething();

インサイドこの

const btnProps = { 
    disabled: !isBtnEnabled 
}; 

<button onClick={this.onButtonClick} {...btnProps}> 
    Click me 
</button>

ような何か？

これは、あなたの個人的な好みやチーム内の内部合意によって決まると思います。私の意見では、レンダリングメソッドからonClickメソッドを分離する方がきれいです。

2017-10-06 12:11:43

答えて