CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
see sharper
see sharper

Reputation: 12055

React Material-UI checkbox onChange event does not fire

Trying to use Material UI checkbox. Pretty simple one might think? Well the checkbox doesn't toggle. Turns out the onChange event is not fired even internally to the component (I put logs in the node_modules package).

      <Checkbox
        checked={this.state.isTrue}
        onChange={e => {
          console.log(e.target.checked);
          this.setState({isTrue: e.target.checked});
        }} />

Pretty simple, right? But the console.log never fires. I can hack around it by putting an onClick event handler on the component and toggling the state manually, but that is silly. Anyone have a clue?

The API is at https://material-ui.com/api/checkbox/#checkbox. Not rocket science.

Upvotes: 20

Views: 50565

Answers (6)

papigee
papigee

Reputation: 7408

If the above does not work for you, check your css, especially if you have global CSS. Chrome dev tools (Elements section) will help here. Look for tags, classes, and especially elements in the CSS. A few pointers below:

label {
css1: value1,
}

&.checked {
css1: value1,
}

&.disabled {
css1: value1
}

If you find any of this, they could easily override the mui css.

Upvotes: 0

Manuel Benito Barahona
Manuel Benito Barahona

Reputation: 11

I just had this trouble, for the checkbox onChange you have to check on the "checked" (event.target.checked) variable, not the "value"

code sample

Upvotes: 0

Maxim Mandrik
Maxim Mandrik

Reputation: 447

In the Material UI (in version 5.0.0-beta.4) the onChange event is called when the input[type= "checkbox"] is clicked (this element is transparent, but clicking on it is important). Perhaps the problem is that your styles change input[type= "checkbox"].

P.S. I had a problem with the styles input[type= "checkbox"] { width: 0; height: 0;} were prioritized and the mouse click clicked on the usual element, and not on input[type= "checkbox"].

P.P.S. Look at the styles through the developer tools for working options from the documentation and for your own version, you will find the difference.

Upvotes: 1

egor.xyz
egor.xyz

Reputation: 3197

In many cases, Material UI Checkbox onChange event is not working.

I suggest to save your time and use onClick event instead.

It will work always. Checkbox usually have a boolean value.

 <Checkbox
    checked={this.state.isTrue}
    onClick={() => this.setState({isTrue: !this.state.isTrue})}
 />

Upvotes: 19

Vikash Tiwari
Vikash Tiwari

Reputation: 113

Your code looks fine, maybe something else is wrong somewhere. However, for a quick POC, you can refer to this link. This is the same forked from material UI official docs demo so you could relate easily.

Additionally, you can compare the code with given below

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

export default function Checkboxes() {
  const [isTrue, setIsTrue] = React.useState(false);


  return (
    <div>
      <Checkbox
        checked={isTrue}
        onChange={e=> {
          console.log("target checked? - ", e.target.checked);
          setIsTrue(e.target.checked)
        }}
        value="checkedA"
        inputProps={{
          'aria-label': 'primary checkbox',
        }}
      />
    </div>
  );
}

Here are screenshots for verification enter image description here enter image description here

References: https://material-ui.com/components/checkboxes/

Upvotes: 1

sebastienbarbier
sebastienbarbier

Reputation: 6832

The issue might come from the structure of your component as provided code is perfectly fine, here is a working exemple you can try on codesandbox.io.

Compare with your code and try to find differences, but isolating a specific element might be a good way to realise the issue might come from somewhere else.

import React, { Component } from "react";
import { render } from "react-dom";
import Checkbox from "material-ui/Checkbox";

class App extends Component {
  constructor() {
    super();
    this.state = {
      isTrue: false
    };
  }
  render() {
    return (
      <div>
        <Checkbox
          checked={this.state.isTrue}
          onChange={e => {
            console.log(e.target.checked);
            this.setState({ isTrue: e.target.checked });
          }}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Upvotes: 18

Related Questions