I am not able to Change the value of checkbox from false to true onclick on checkbox the onchange is not getting called.

checkedbox should be changed to true whwn ever we clicked the checkbox

this.state = {
  checkedbox: false,
}

 render() {
 <Checkbox
   label="test"
   value={checkedbox}
   onChange={this.handelCheck}
  />
}



 handelCheck = (event) => {
this.setState({
  checkedbox: event.target.checked
});
}

CodePudding user response：

You need to use this.state in value, try the following

value={this.state.checkedbox}

CodePudding user response：

Simple, try using checked attribute for checkbox

Example

CodePudding user response：

1. It depends how you're logging that state after you've changed it. setState provides a callback that you can use to do things after the async process has completed, like logging the new state.

2. Depending on whether you're using a library or rolling your own Checkbox component, checked rather than value for your component property is much more meaningful.

3. You should be passing in the checked state to your checked property, not a random variable called checked.

In this short example I've created my own Checkbox component to show you how it all fits together.

const { Component } = React;

class Example extends Component {

  constructor() {
    super();
    this.state = { checked: false };
  }

  // Set the state, and the call the callback
  // function to log the new state
  handleChange = (e) => {
    this.setState({ checked: e.target.checked }, () => {
      console.log(this.state.checked);
    });
  }

  render() {
    return (
      <div>
        <Checkbox
          label="test"
          checked={this.state.checked}
          handleChange={this.handleChange}
        />
      </div>
    );
  }

};

class Checkbox extends Component {

  render() {
  
    const {
      checked,
      label,
      handleChange
    } = this.props;

    return (
      <fieldset>
        <legend>{label}</legend>
        <input
          type="checkbox"
          checked={checked}
          onChange={handleChange}
        />
      </fieldset>
    )
  
  }

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

input[type="checkbox"]:hover { cursor: pointer; } 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

CodePudding user response：

try this one change on the value in the Checkbox to

value={this.state.checkedbox}

and change the handelCheck to just change to

 !this.state.checkedbox

and it shold work

  this.state = {
      checkedbox: false,
    }
    
     render() {
     <Checkbox
       label="test"
       value={this.state.checkedbox}
       onChange={this.handelCheck}
      />
    }
    
    
    
     handelCheck = () => {
    this.setState({
      checkedbox: !this.state.checkedbox
    });
    }

CodePudding user response：

In my opinion maybe because it is not getting the event!

try :

onChange={e=>this.handelCheck(e)}