[英]React js - having problems creating a todo list
I'm trying to create a todo list where after you finish one task,我正在尝试创建一个待办事项列表,在您完成一项任务后,
only then will the next task be enabled (to tick as finished).只有这样才能启用下一个任务(勾选完成)。
Here is what I have so far:这是我到目前为止所拥有的:
/** @jsx React.DOM */
$(function(){
var tasks = [
{title: "Wake up"},
{title: "Eat dinner"},
{title: "Go to sleep"}
];
var Task = React.createClass({
getInitialState: function(){
return {locked:true, done:false}
},
handleClick: function(e){
this.setState({done: !this.state.done});
var selector = '.toggle[data-order="'+(this.props.order+1)+'"]';
this.setState({locked: true})
console.log(selector)
console.log($(selector).removeAttr("disabled"))
},
render: function() {
var locked;
//Fix first task to not be disabled
if(this.props.order == 0 && this.state.done === false)
locked = false;
else
locked = this.state.locked;
var done = this.state.done ? "Done":"Not done";
var classView = "task" + (this.state.done ? " done":" not-done");
return (
<div class="todo well well-sm" class={classView}>
<span class="description">{this.props.title}</span>
<button type="button" onClick={this.handleClick} data-order={this.props.order} disabled={locked} class="toggle btn btn-default btn-xs pull-right">
<span class="glyphicon glyphicon-unchecked"></span> Done
</button>
</div>
);
}
});
var TaskList = React.createClass({
render: function(){
var i = -1;
var taskNodes = this.props.data.map(function (task) {
return <Task title={task.title} order={++i} />;
});
return (
<div class="task-list">
{taskNodes}
</div>
);
}
});
var Guider = React.createClass({
render: function(){
return (
<div>
<TaskList data={this.props.data} />
</div>
);
}
});
React.renderComponent(<Guider data={tasks} />, document.body);
});
The next buttons are still not disabled, and I feel that I'm doing something wrong in general (not in accordance with the react "zen").下一个按钮仍然没有被禁用,我觉得我总体上做错了(不符合反应“禅”)。
Btw: How can I change the state for a dom element without the user triggering it?顺便说一句:如何在没有用户触发的情况下更改 dom 元素的状态? is there any id I should use?有我应该使用的id吗?
If you initiate the data into non-root component, it becomes hard to update other components.如果您将数据初始化到非根组件中,则更新其他组件变得困难。 So I prefer keeping data into root component, Then pass a click handler as props.所以我更喜欢将数据保存到根组件中,然后将点击处理程序作为道具传递。 Now you'll have access to that handler inside non-root component.现在您将可以访问非根组件中的该处理程序。 Calling that will update root component and so the other non-root components.调用将更新根组件以及其他非根组件。
Here's working jsFiddle - http://jsfiddle.net/ammit/wBYHY/5/这是工作 jsFiddle - http://jsfiddle.net/ammit/wBYHY/5/
var Task = React.createClass({
handleClick: function (e) {
// Passing order of task
this.props.clicked(order);
},
render: function () {
return ( <button type="button" onClick={this.handleClick}></button> );
}
});
var TaskList = React.createClass({
getInitialState: function(){
// initiate tasks here
},
whenClicked: function(order){
// Revise the tasks using `order`
// Finally do a setState( revised_tasks );
},
render: function(){
return ( <Task clicked={this.whenClicked} /> );
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.