在React Component中设置条件onClick行为

Question

我正在开发一个组件,其中一个按钮("提交"类型的输入字段)将在单击后提交数据.但是,如果输入字段为空,我想引入一个安全措施,在屏幕上显示警报.

认为这将与组件属性的工作方式相同,我尝试了下面的变化而没有太多运气:

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