Вложенные атрибуты реагирования

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

Вы можете написать функцию, которая возвращает количество завершенных todos в вашем объекте.

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>