React-如何实现复选框

我正在创建一个ToDo应用程序来自学React。

为我的任务实现复选框功能的最佳方式是什么？我对它的最佳放置位置以及使用状态感到困惑。

就我的代码而言，复选框不会打开，因为它绑定到我的数据，而不是状态。此外，我是否需要为复选框创建一个新的React类？我感谢你的帮助。

var ToDoContainer = React.createClass({
    getInitialState: function(){
        return {
            name:"Michael",
            tasks:[
                {task:"Go to the gym", completed:false}, 
                {task:"Do yoga", completed:false},
                {task:"Buy groceries", completed:true},
                {task:"Get tire fixed", completed:false}
            ]
        }
    },
    addTask: function(task){
        this.setState({
            tasks:this.state.tasks.concat(task) 
        }); 
    },
    markComplete: function(task){
        console.log('markComplete');
        console.log(task);
    },
    render: function(){
        return (
            <div>
                <h3>Name: {this.state.name}</h3>
                <TaskList tasks={this.state.tasks} check={this.markComplete}/>
                <AddTask addNew={this.addTask} />
            </div>
        )
    }
});
var TaskList = React.createClass({
    handleCheck: function(e){
        console.log('check');
        this.props.check(e.target);
    },
    render: function(){
        var that = this;
        var task = this.props.tasks.map(function(task, index){
                return <li key={index} className={task.completed ? "complete" : "incomplete"} >
                            <input type="checkbox" checked={task.completed} onChange={that.handleCheck} />
                            {task.task}
                        </li>
        });
        return (
            <div>
                <ul>
                    {task}
                </ul>
            </div>
        )
    }
});
var AddTask = React.createClass({
    getInitialState: function(){
        return{
            newTask:""
        }
    },
    handleChange: function(e){
        this.setState({
            newTask:e.target.value
        });
    },
    handleSubmit: function(e){
        e.preventDefault();
        this.props.addNew({task:this.state.newTask, completed:false});
        this.setState({
            newTask:""
        });
    },
    render: function(){
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input type="text" value={this.state.newTask} onChange={this.handleChange} />
                    <button disabled={this.state.newTask == ""}>Add Task</button>
                </form>
            </div>
        )
    }
});

ReactDOM.render（，document.getElementById（'app'））；