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 theonClick
but not theto
– 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
1 Answer
Reset to default 8You 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