Question

我正在玩Fluxxor tutorial (example at the very top)并且有一个使用React构建的简单待办事项列表。它非常基础，我想添加一个简单的验证来更好地理解数据绑定。

var Application = React.createClass({
  mixins: [FluxMixin, StoreWatchMixin("TodoStore")],

  getInitialState: function() {
    return { newTodoText: "" };
  },

  getStateFromFlux: function() {
    var flux = this.getFlux();
    return flux.store("TodoStore").getState();
  },

  render: function() {
    var todos = this.state.todos;
    return (
      <div>
        <ul>
          {Object.keys(todos).map(function(id) {
            return <li key={id}><TodoItem todo={todos[id]} /></li>;
          })}
        </ul>
        <form onSubmit={this.onSubmitForm}>
          <input type="text" size="30" placeholder="New Todo"
                 value={this.state.newTodoText}
                 onChange={this.handleTodoTextChange} />
          <input type="submit" value="Add Todo" />
        </form>
        <button onClick={this.clearCompletedTodos}>Clear Completed</button>
      </div>
    );
  },

因此，如果我想在输入字段为空时禁用submit，我可以将输入值与初始状态进行比较：

<input type="submit" value="Add Todo" disabled={!@state.newTodoText}/>

现在我要禁用Clear Completed，直到至少有一个TodoItem被标记为已完成。发生这种情况时this.state.todos更新为completed密钥设置为true，并且我的应用程序组件中提供了该代码：

Object {todo: Object}
  todo: Object
    complete: true
    id: 1
    text: "text"

我应该如何处理这个逻辑？提前谢谢。

Answer 1

您可以编写一个函数来返回对象中已完成待办事项的数量。

countCompleted: function(todos) {
  var todoKeys = Object.keys(todos);

  var completed = todoKeys.filter(function(key) {
    var todo = todos[key];
    return todo.complete;
  });

  return completed.length;
}

然后从渲染中调用该函数以有条件地禁用该按钮。

<button
  onClick={this.clearCompletedTodos}
  disabled={this.countCompleted(todos) > 0}>
  Clear Completed
</button>

React状态嵌套属性

1 个答案: