React.js không thể thay đổi trạng thái hộp kiểm

Question

Tôi đã tạo danh sách TODO đơn giản này và khi tôi muốn chọn hộp kiểm tôi không thể.

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; 

Phụ huynh:

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; 

Answer 1

Khi bạn đã không được xác định một handler onChange trên đầu vào của bạn Phản ứng sẽ làm cho lĩnh vực đầu vào như read-only.

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

và

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

Answer 2

Đây là một trong những hit hàng đầu trên Google cho "Phản ứng Component không cập nhật", vì vậy mặc dù câu trả lời đã được chấp nhận tốt, tôi nghĩ rằng nó có thể gây hiểu nhầm.

Loại checkbox không yêu cầu onChange. Tôi không chắc chắn nếu điều này đã thay đổi kể từ khi câu trả lời đã được đăng (phiên bản hiện tại của React là v15 - 2016-04-20).

Xem ví dụ sau của nó làm việc mà không có một handler onChange (xem 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); 

Một mặt lưu ý - rất nhiều câu trả lời (đối với câu hỏi tương tự) chỉ đơn giản là giới thiệu "defaultChecked" - mặc dù công trình này, nó thường là một thước đo một nửa.