-
-
Notifications
You must be signed in to change notification settings - Fork 320
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
When onChange function passed to Checkbox it stops working #228
Comments
@MileanCo I would say it's hard to guess what's wrong with your implementation, next time provide more info :) But my hunch is that your code looks like this: import React from "react";
import { Block,Checkbox } from "galio-framework";
export default class App extends React.Component {
state = { apples: false };
handleOnChange(val) {
if (val) {
this.setState({ apples: false });
} else {
this.setState({ apples: true });
}
};
render() {
return (
<Block safe>
<Checkbox
label="Apples"
flexDirection="row"
initialValue={true}
onChange={this.handleOnChange}
/>
</Block>
);
}
} Which means after you tap the checkbox, you get an error:
This error means you forgot to bind components context to your function = the handling function doesn't have access to the component's You have to either bind context in the constructor, or use an arrow function: import React from "react";
import { Block,Checkbox } from "galio-framework";
export default class App extends React.Component<{}> {
state = { apples: false };
handleOnChange = (val) => {
if (val) {
this.setState({ apples: false });
} else {
this.setState({ apples: true });
}
}
render() {
return (
<Block safe>
<Checkbox
label="Apples"
flexDirection="row"
initialValue={true}
onChange={this.handleOnChange}
/>
</Block>
);
}
} |
Describe the bug
When you pass the onChange function the checkbox stops changing state and stays either checked or unchecked.
If you remove onChange(), then it works but I cannot do anything based on if it was clicked or not. I think this.setState() is what is messing it up.
The text was updated successfully, but these errors were encountered: