Javascript React js-创建待办事项列表时遇到问题

我正在尝试创建一个待办事项列表，在您完成一项任务后，
只有这样，才能启用下一个任务（勾选为已完成）

以下是我到目前为止的情况：

/** @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>&nbsp;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);
});

/**@jsx React.DOM*/
$（函数（）{
变量任务=[
{标题：“醒来”}，
{标题：“吃晚餐”}，
{标题：“去睡觉”}
];
var Task=React.createClass({
getInitialState:函数（）{
返回{locked:true，done:false}
},
handleClick:函数（e）{
this.setState（{done:！this.state.done}）；
变量选择器='.toggle[data order=“”+（this.props.order+1）+''”；
this.setState（{locked:true}）
console.log（选择器）
console.log（$（选择器）.removeAttr（“已禁用”））
},
render:function（）{
var锁定；
//修复第一个不被禁用的任务
if（this.props.order==0&&this.state.done==false）
锁定=错误；
其他的
锁定=this.state.locked；
var done=this.state.done？“done”：“未完成”；
var classView=“任务”+（this.state.done？”done:“未完成”）；
返回(
{this.props.title}
多恩
);
}
});
var TaskList=React.createClass({
render:function（）{
var i=-1；
var taskNodes=this.props.data.map（函数（任务）{
返回；
});
返回(
{taskNodes}
);
}
});
var Guider=React.createClass({
render:function（）{
返回(
);
}
});
React.renderComponent（，document.body）；
});

“下一步”按钮仍然没有被禁用，我觉得我总体上做错了什么（不符合react“zen”）

顺便说一句：

---

如何在用户不触发dom元素的情况下更改其状态？是否有我应该使用的id？

如果将数据初始化到非根组件中，则很难更新其他组件。所以我更喜欢将数据保存到根组件中，然后作为道具传递单击处理程序。现在您可以访问非根组件中的处理程序。调用它将更新根组件以及其他非根组件

这里是工作的JSFIDLE-

范例-

var Task=React.createClass({
handleClick:函数（e）{
//任务传递顺序
此.props.clicked（订单）；
},
渲染：函数（）{
返回（）；
}
});
var TaskList=React.createClass({
getInitialState:函数（）{
//在此启动任务
},
单击时：功能（顺序）{
//使用`顺序'修改任务`
//最后做一个setState（修订的_任务）；
},
render:function（）{
返回（）；
}
});

我会在

TaskList

中声明handleClick，并将其作为道具传递给

Task

并调用它。这将允许您更改其他任务的状态。您不应该像这样在

DOMReady

中定义所有内容，而应该只定义代码的实例化。这会让它跑得更快！触发“this.props.clicked（order）；”时它会叫“whenClicked”吗？在这之后，我如何启用下一个任务？（如何访问该dom元素？）我只想补充一点，我通常更喜欢保持事物的命名方案与react中的内置元素相同。因此，例如，与其使用prop

clicked

，不如将其称为

onClick

，以保持一致性。然后您总是知道它是一个内置的还是自定义的组件，

onClick={this.handler}

是您需要做的。使用相同的命名约定不会发生冲突。

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} /> );
  }
});