最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Allowing onClick conditionally - Stack Overflow

programmeradmin1浏览0评论

I am having trouble making a Link onClick disabled if a condition is not met.

  • Tried exporting the logic to a function outside the render, using an if condition is not met prevent default else execute the dispatch. Button is always disabled this way.
  • Tried using CSS to disable click but realized I could just hit tab and enter to bypass.
  • Tried adding a disabled={} to the Link but it does not work.
  • Tried checking within the onClick if the condition is met otherwise undefined. Still goes through.

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
      ponent={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
}

I expect the button to be disabled unless at least one character has been enterred into the input field.

I am having trouble making a Link onClick disabled if a condition is not met.

  • Tried exporting the logic to a function outside the render, using an if condition is not met prevent default else execute the dispatch. Button is always disabled this way.
  • Tried using CSS to disable click but realized I could just hit tab and enter to bypass.
  • Tried adding a disabled={} to the Link but it does not work.
  • Tried checking within the onClick if the condition is met otherwise undefined. Still goes through.

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
      ponent={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
}

I expect the button to be disabled unless at least one character has been enterred into the input field.

Share Improve this question asked Apr 9, 2019 at 15:34 ProzakProzak 3032 gold badges8 silver badges19 bronze badges 3
  • Im pretty sure your 2nd attempt should've worked. What is wrong with it? – hackape Commented Apr 9, 2019 at 15:38
  • 1 I believe the issue could react router to={'/${slug}/client/finish'} not being disabled. you remove the onClick but not the to – Beaulne Commented Apr 9, 2019 at 15:40
  • @Beaulne you are right, makes sense. Onclick doesn't override the to={path}. Do you have any ideas on how to solve this? – Prozak Commented Apr 10, 2019 at 7:35
Add a ment  | 

1 Answer 1

Reset to default 8

You need to prevent the default functionality. try something along the lines of this

let referenceIsValid = true

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

}

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

发布评论

评论列表(0)

  1. 暂无评论