我正在创建一个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'));
首先,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});
},
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句