在 React 组件中设置条件 onClick 行为答案

【问题标题】：Setting conditional onClick behaviour in React Component在 React 组件中设置条件 onClick 行为
【发布时间】：2017-11-21 12:13:02
【问题描述】：

我正在开发一个组件，其中一个按钮（“提交”类型的输入字段）将在单击后提交数据。但是，如果输入字段为空白，我想引入一种保护措施，以在屏幕上显示警报。

认为这与组件属性的工作方式相同，我尝试了以下变体，但运气不佳：

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

我宁愿不在 onSubmit 函数中运行检查，以便尽可能隔离对商店的更新（我正在遵循 React-Redux 结构）。

知道 JSX 是否以及如何处理这种情况？

【问题讨论】：

标签： reactjs react-redux react-jsx

【解决方案1】：

这应该有效：

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

【讨论】：

【解决方案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);
}

【讨论】：