javascript - 有条件地允许 onClick
问题描述
如果不满足条件,我无法禁用 Link onClick。
- 尝试将逻辑导出到渲染外部的函数,使用不满足 if 条件阻止默认 else 执行调度。按钮总是以这种方式禁用。
- 尝试使用 CSS 禁用点击,但意识到我可以点击选项卡并输入绕过。
- 尝试将 disabled={} 添加到链接,但它不起作用。
- 尝试在 onClick 中检查是否满足条件,否则未定义。还是通过了。
1ST ATTEMPT
class Order extends React.Component<OrderProps> {
state = { referenceIsValid: true }
handleClick = (e: any) => {
if (!this.state.referenceIsValid) {
e.preventDefault()
} else {
this.props.postProspect()
}
}
render() {
const {
configuration: { referenceType, reference }
}
if (referenceType && referenceType === "required") {
referenceIsValid = reference && reference.length > 0
}
return (
{(referenceType === "required" || referenceType === "optional") && (
<Field
component={TextField}
name="configuration.reference"
label="References
placeholder="People you have worked with."
getErrors={(value: any) => {
if (
referenceType === "required" &&
(value === undefined || value.length < 1)
) {
return ["Add a reference"]
}
return []
}}
/>
)}
<Link
to={`/${slug}/client/finish`}
onClick={e => this.handleClick(e)}
> Order
</Link>
)
}
const connectedReview = connect(
mapStateToProps,
{
postProspect,
}
)(Review)
export default reduxForm({
form: "orderForm",
destroyOnUnmount: false,
})(connectedReview)
2ND ATTEMPT
let referenceIsValid = true
onClick={
!referenceIsValid ? undefined : this.props.postProspect
}
我希望该按钮被禁用,除非在输入字段中输入了至少一个字符。
解决方案
您需要阻止默认功能。尝试一些类似的东西
let referenceIsValid = true
onClick={ e => !referenceIsValid ? e.preventDefault() : this.props.postProspect()
}
推荐阅读
- reactjs - 如何在 React 中缓存整个功能组件?
- python - 为什么不能在循环内更改数组的数据类型?
- javascript - 如何将点击功能更改为悬停/鼠标悬停功能
- flutter - Flutter - 加载繁重的小部件时防止交互
- c# - 后跟空双括号的 `is` 运算符是什么?
- java - 无法调用 JTable,因为 tableDisplay 为空
- javascript - 如何在猫鼬的对象数组中搜索对象?
- python - 为什么 python telethon 在与电报连接时给出信号量错误
- firebase - 我们如何为 Firebase 存储编写依赖于 Firebase 实时数据库中的值的安全规则?
- opencl - 是否所有与 OpenCL 优化相关的选项都默认为 false?