4


1 つのタスクを完了した後でのみ、次のタスクが有効になるtodo リストを作成しようとしています(終了時にチェックを入れるため)。

これが私がこれまでに持っているものです:

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

次のボタンはまだ無効になっておらず、一般的に何か間違っていると感じています(反応する「禅」に従っていません)。

ところで: ユーザーがトリガーせずに dom 要素の状態を変更するにはどうすればよいですか? 私が使用すべきIDはありますか?

4

1 に答える 1