如果不满足条件,我无法禁用链接 onClick。
- 尝试将逻辑导出到渲染外部的函数,使用 if 条件不满足以防止默认 else 执行分派(dispatch)。按钮始终以这种方式禁用。
- 尝试使用 CSS 来禁用点击,但意识到我可以直接点击 Tab 并输入以绕过。
- 尝试向链接添加 disabled={} 但它不起作用。
- 尝试在 onClick 中检查是否满足条件,否则未定义。仍然通过。
第一次尝试
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)
第二次尝试
let referenceIsValid = true
onClick={
!referenceIsValid ? undefined : this.props.postProspect
}
除非在输入字段中输入了至少一个字符,否则我希望该按钮被禁用。
最佳答案
您需要阻止默认功能。尝试类似的方法
let referenceIsValid = true
onClick={ e => !referenceIsValid ? e.preventDefault() : this.props.postProspect()
}
关于javascript - 有条件地允许 onClick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55596444/