Question

我正在创建一个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（＆＃39; app＆＃39;））;

Answer 1

首先在TaskList组件中，您可以直接使用来自

等道具的事件

 <input type="checkbox" checked={task.completed} onChange={that.props.check} value={task.task} />

和你的Markcomplete方法

markComplete: function(e){
    console.log('markComplete');
    var TempTask=this.state.tasks;
    for(int i=0;i<=TempTask.length;i++)
      {
          if(TempTask[i].task==e.target.value)
          {
              if((e.target).checked) 
               {
                 TempTask[i].completed=true;  
               }
              else
               {
                 TempTask[i].completed=false;
               }
          }
      }
    this.setState({this.state.tasks:TempTask});
},

React - 如何实现复选框？

1 个答案: