반응식 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 같은있다 : 나는 돌아 오는을 사용하고 있기 때문에

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

기능 1은 소품에지도 파견을 통해 전달됩니다. 코드의 다른 부분은 잘 작동합니다. Button1이 올바르게 비활성화되어 있으므로 Redux 작업 & 감속기에서 this.props.submitting이 올바르게 설정되어 있음을 보여줍니다. 그것은 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}) 

}