javascript - Allowing onClick conditionally

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 Prozak 3032 gold badges8 silver badges19 bronze badges

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

Sorted by: 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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Allowing onClick conditionally - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)