Creé esta simple lista TODO, y cuando quiero marcar la casilla de verificación, no puedo.
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;El padre:
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;Cuando no haya especificado un controlador onChange en sus entradas, React mostrará el campo de entrada como de solo lectura.
getInitialState() { return { done: false }; }y
<input type="checkbox" checked={this.state.done || this.props.done } onChange={this.onChange} />Este es uno de los principales éxitos en Google para "El componente React no se actualiza", por lo que, aunque la respuesta ha sido bien aceptada, creo que podría ser engañosa.
El tipo de checkbox de verificación no requiere onChange . No estoy seguro de si esto ha cambiado desde que se publicó la respuesta (la versión actual de React es v15 - 2016-04-20).
Vea el siguiente ejemplo de cómo funciona sin un controlador onChange (vea 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);Otra nota al margen: muchas respuestas (para preguntas similares) simplemente recomiendan "verificado por defecto", aunque esto funciona, generalmente es una medida a medias.
Sólo para otros que vienen aquí. React ahora proporciona defaultChecked :
<label htmlFor={id}> <input id={id} type="checkbox" defaultChecked={input.props.checked} // disabled={input.props.disabled} /> <span className="custom-checkbox"></span> {restChildren} </label>