React.js non può cambiare stato della casella di controllo

Ho creato questa semplice list TODO e quando voglio controllare la casella di controllo non posso.

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; 

Il genitore:

 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; 

Se non hai specificato un gestore onChange sui tuoi input React renderà il field di input come sola lettura.

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

e

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

Questo è uno dei migliori successi su Google per "React Component not updating", quindi anche se la risposta è stata ben accettata, penso che potrebbe essere fuorviante.

Il tipo di checkbox non richiede l' onChange . Non sono sicuro se questo è cambiato da quando la risposta è stata inviata (versione attuale di React è v15 – 2016-04-20).

Vedere il seguente esempio di funzionamento senza un gestore onChange (vedere 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); 

Un'altra nota laterale – molte risposte (per domande simili) raccomandano semplicemente "defaultChecked" – anche se questo funziona, di solito è una misura di mezzo.