在 React Component 中设置条件 onClick 行为
Setting conditional onClick behaviour in React Component
我正在开发一个组件,其中的按钮('submit' 类型的输入字段)将在单击后提交数据。但是,我想引入一种保护措施,以便在输入字段为空白时在屏幕上显示警报。
认为这与组件属性的工作方式相同,我尝试了以下变体,但运气不佳:
onClick={props.inputText === ''
?
alert("Text cannot be blank.")
:
(e => props.onSubmit(props.inputText))}/>
我宁愿不 运行 onSubmit 函数内部的检查,以便尽可能隔离对商店的更新(我正在关注 React -Redux 结构)。
知道 JSX 是否以及如何处理这种情况吗?
这应该有效:
onClick={() => { props.inputText === '' ?
alert("Text cannot be blank.") :
props.onSubmit(props.inputText) }}
您正在将值分配给 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);
}
我正在开发一个组件,其中的按钮('submit' 类型的输入字段)将在单击后提交数据。但是,我想引入一种保护措施,以便在输入字段为空白时在屏幕上显示警报。
认为这与组件属性的工作方式相同,我尝试了以下变体,但运气不佳:
onClick={props.inputText === ''
?
alert("Text cannot be blank.")
:
(e => props.onSubmit(props.inputText))}/>
我宁愿不 运行 onSubmit 函数内部的检查,以便尽可能隔离对商店的更新(我正在关注 React -Redux 结构)。
知道 JSX 是否以及如何处理这种情况吗?
这应该有效:
onClick={() => { props.inputText === '' ?
alert("Text cannot be blank.") :
props.onSubmit(props.inputText) }}
您正在将值分配给 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);
}