在React組件中設置條件onClick行爲

Question

我正在處理一個組件，其中一個按鈕（'submit'類型的輸入字段）將單擊提交數據。但是，如果輸入字段爲空白，我想介紹一種保護措施，以在屏幕上顯示警報。

思考這樣的工作以同樣的方式，因爲它會爲組件的屬性，我試過在沒有多少運氣以下變化：

onClick={props.inputText === '' 
       ? 
       alert("Text cannot be blank.") 
       : 
       (e => props.onSubmit(props.inputText))}/> 

我寧願不運行的onsubmit內檢查函數以便儘可能隔離商店的更新（我遵循React-Redux結構）。

任何想法是否以及如何JSX處理這樣的情況？

Answer 1

這應該工作：

onClick={() => { props.inputText === '' ? 
    alert("Text cannot be blank.") : 
    props.onSubmit(props.inputText) }} 

Answer 2

您分配值onClick event，但期望的onclick功能。爲了達到這個目的，要包裝一個函數體內的所有邏輯。

寫這樣的：

onClick={ e => { 
    props.inputText === '' ? 
     alert("Text cannot be blank.") 
    : 
     props.onSubmit(props.inputText)} 
    } 
/> 

或者

onClick={this.onClick.bind(this)/> 

onClick(e){ 
    if(props.inputText === ''){ 
     alert("Text cannot be blank."); 
     return; 
    } 
    props.onSubmit(props.inputText); 
}