React.js can't change checkbox state

Question

I created this simple TODO list, and when I want to check the checkbox I can't.

import React from 'react';

const TodoItem = React.createClass({

  render() {
    return (
      <div>

        <span>{this.props.todo}</span>
        <input type="checkbox" checked={this.props.done} />

      </div>
    );
  }

});

export default TodoItem;

The parent:

import React from 'react';
import TodoItem from './TodoItem';
import AddTodo from './AddTodo';

const TodoList = React.createClass({

  getInitialState() {
    return {
      todos: [{
        todo: 'some text',
        done:false
      },{
        todo: 'some text2',
        done:false
      },
      {
        todo: 'some text3',
        done:true
      }]
    };
  },

   addTodo (childComponent) {
    var todoText = childComponent.refs.todoText.getDOMNode().value;
    var todo = {
      todo: todoText,
      done:false
    };
    var todos = this.state.todos.concat([todo]);
    this.setState({
      todos:todos
    });

    childComponent.refs.todoText.getDOMNode().value = '';
  },

  render() {

    var Todos = this.state.todos.map(function(todo) {
      return (
           <TodoItem todo={todo.todo} done={todo.done} />
        )
    });

    return (
      <div>
       {Todos}
       <AddTodo addTodo={this.addTodo}/>
      </div>

    );
  }

});

export default TodoList;

Henrik Andersson · Accepted Answer · 2015-02-12 13:56:36Z

44

When you haven't specified an onChange handler on your inputs React will render the input field as read-only.

getInitialState() {
    return {
        done: false
    };
}

and

<input type="checkbox" checked={this.state.done || this.props.done } onChange={this.onChange} />

answered Feb 12, 2015 at 13:56

Henrik Andersson

47.5k16 gold badges102 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Bazinga Over a year ago

Buy why i have to do this? i dont need onChange handler, what i need to write inside this handler?

Henrik Andersson Over a year ago

You do need it because React expects one. It's whats known as controlled or uncontrolled inputs. Read here why, facebook.github.io/react/docs/forms.html

Casper LI Over a year ago

I already tested this method but it does not work for my code. I am using the Checkbox component from Material UI.

Henrik Andersson Over a year ago

@CasperLI Without any code to show it's impossible for anyone to help you debug. Either create a JSbin or JSfiddle to show your erroneous usecase or post a new question :)

Chris Over a year ago

You don't need an onChange handler. Not providing one wouldn't make the field "read only".

|

muuvmuuv · Accepted Answer · 2020-02-03 17:43:13Z

9

Just for others coming here. React now provides defaultChecked:

<label htmlFor={id}>
  <input
    id={id}
    type="checkbox"
    defaultChecked={input.props.checked}
    // disabled={input.props.disabled}
  />
  <span className="custom-checkbox"></span>
  {restChildren}
</label>

answered Feb 3, 2020 at 17:43

muuvmuuv

9532 gold badges13 silver badges42 bronze badges

1 Comment

Eric Antoine Scuccimarra Over a year ago

Changing "checked" to "defaultChecked" resolved the problem for me. Thanks !

Chris · Accepted Answer · 2016-04-20 12:10:36Z

8

This is one of the top hits on Google for "React Component not updating", so although the answer has been well accepted, I think it could be misleading.

The checkbox type doesn't require the onChange. I am not sure if this has changed since the answer was posted (current version of React is v15 - 2016-04-20).

See the following example of it working without an onChange handler (see JSBIN):

class Checky extends React.Component {
    render() {
      return (<input type="checkbox" checked={this.props.checked} />);
    }
}

class App extends React.Component {

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

    render() {
        return (
          <div>
            <a href="#" onClick={ () => { this.setState({ checked: !this.state.checked }); }}>Toggle</a>
            <hr />
            <Checky checked={this.state.checked} />
          </div>
        );
    }
}


React.render(<App />, document.body);

Another side note - a lot of answers (for similar questions) simply recommend "defaultChecked" - although this works, it is usually a half measure.

answered Apr 20, 2016 at 12:10

Chris

58.9k34 gold badges158 silver badges198 bronze badges

2 Comments

BenjiFB Over a year ago

The above answer indicates that without the "OnChanged" handler, the checkbox will be rendered read-only. When I click your JSBin, that's the exact behavior I see: when I click the checkbox itself (not the link), nothing happens to the checked state. Is this your expectation?

Chris Over a year ago

Yes. My point is that "onChange" isn't required to make it an editable (non-read-only) component. How you trigger that state change (either via the checkbox onClick / onChange is up to you

Collectives™ on Stack Overflow

React.js can't change checkbox state

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related