在反應中禁用按鈕JSX

-2

我想單擊Button1時禁用多個按鈕。但是隻有Button1被禁用，而Button2不是。請幫忙。謝謝！在反應中禁用按鈕JSX

<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被正確禁用，以便顯示this.props.submitting正在由我的Redux行動& reducer正確設置。這看起來像一個HTML問題。

來源

2017-03-09 Evan

無法理解此片段，請添加更多函數定義。 – aeid

如果您在按鈕上使用onClick事件來調用'_handleButton1'函數，那麼您爲什麼需要將其稱爲onSubmit形式。你也可以添加你的'_handleButton1'函數的定義 –

我找到了一個想法分享的解決方案。這工作。

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

}

來源

2017-03-10 01:08:10 Evan

在反應中禁用按鈕JSX

回答

相關問題