有条件地允许 onClick答案

【问题标题】：Allowing onClick conditionally有条件地允许 onClick
【发布时间】：2019-04-09 15:34:22
【问题描述】：

如果不满足条件，我无法禁用链接 onClick。

尝试将逻辑导出到渲染外部的函数，使用不满足 if 条件阻止默认 else 执行调度。按钮始终以这种方式被禁用。
尝试使用 CSS 禁用点击，但我意识到我可以直接点击 tab 并进入绕过。
尝试将 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
}

除非在输入字段中输入了至少一个字符，否则我希望该按钮被禁用。

【问题讨论】：

我很确定你的第二次尝试应该奏效了。它有什么问题？
我相信这个问题可能会导致路由器 to={'/${slug}/client/finish'} 未被禁用。您删除了 onClick 而不是 to
@Beaulne 你是对的，有道理。 Onclick 不会覆盖 to={path}。您对如何解决这个问题有任何想法吗？

标签： javascript reactjs

【解决方案1】：

您需要阻止默认功能。尝试类似的方法

let referenceIsValid = true

onClick={ e => !referenceIsValid ? e.preventDefault() : this.props.postProspect()

}

https://github.com/ReactTraining/react-router/issues/1082

【讨论】：