反応するボタンを無効にするJSX

Question

Button1をクリックすると、複数のボタンを無効にしようとしています。しかし、Button1だけが無効になっていて、何とかButton2は無効です。 助けてください。ありがとうございました！

<button disabled={this.props.submitting} className="button1" type="submit" onClick={(e)=>this._handleButton1(e)}> 
     <IndexLink activeClassName="activeLink" to='/button1'>Button1</IndexLink> 
    </button> 

    <button disabled={this.props.submitting} className="button2" type="button" onClick={(e)=>this._handleButton2(e)}> 
     <IndexLink activeClassName="activeLink" to='/button2'>Button2</IndexLink> 
    </button> 

_handleButton1と_handleButton2は次のようにしている：私はReduxのを使用しておりますので

_handleButton1(e) { 
    e.preventDefault(); 
    this.props.function1(); 
} 

はfunction1は小道具にマップの派遣を通過します。コードの他の部分は正常に動作しています。 Button1が適切に無効になっているので、Reduxの処置&レデューサーによってthis.props.submitが正しく設定されていることが示されます。これはHTMLの問題のようです。

Answer 1

解決策が見つかりました。これはうまくいった。

render() { 
    let buttons; 
    if (!this.props.submitting) { 
    buttons = (
     <div> 
      <button className="button1" type="submit" onClick={(e)=>this._handleButton1(e)}> 
       <IndexLink activeClassName="activeLink" to='/button1'>Button1</IndexLink> 
      </button> 

      <button className="button2" type="button" onClick={(e)=>this._handleButton2(e)}> 
       <IndexLink activeClassName="activeLink" to='/button2'>Button2</IndexLink> 
      </button> 
     </div> 
    )} else { 
     buttons = (
     <div>     
      <button disabled>Submit</button> 
      <button disabled>Expenses</button> 
     </div> 
    )} 
    return ({button}) 

}