Reagieren - Wie Wert an Filterfunktion in Komponente übergeben?

Question

Ich versuche eine einfache to-do-App zu erstellen.

Ich speichere alle meine Aufgaben in einem Array wie folgt:

var TASKS = [ 
    { 
    name: "Pay Bills", 
    completed: false, 
    id: 1, 
    }, 
    { 
    name: "Go shopping", 
    completed: false, 
    id: 2, 
    }, 
    { 
    name: "Pick up something", 
    completed: false, 
    id: 3, 
    }, 
    { 
    name: "Drink Coffee", 
    completed: true, 
    id: 4, 
    }, 
]; 

und ich möchte, dass sie in getrennten Abschnitten zur Liste (todo/done) von Booleschen Wert als Requisiten auf der Liste Komponente übergeben.

Meine Komponentenstruktur ist hier:

var Application = React.createClass({ 
    propTypes: { 
    title: React.PropTypes.string, 
    }, 

    getDefaultProps: function() { 
    return { 
     title: "Add item", 
    } 
    }, 

    onTodoAdd: function(name) { 
     ... 
    }, 

    onRemoveTask: function(index) { 
     ... 
    }, 

    onCompletedTask: function(index) { 
     ... 
    }, 

    render: function() { 
    return (
     <div className="to-do"> 

     <Section title={this.props.title}> 
      <AddTodoForm onAdd={this.onTodoAdd} /> 
     </Section> 

     <Section title="to-do"> 
      <ListTasks initialTasks={TASKS} completedTasks={false} /> 
     </Section> 

     <Section title="done"> 
      <ListTasks initialTasks={TASKS} completedTasks={true} /> 
     </Section> 
     </div> 
    ); 
    } 
}); 

und die Auflistung Komponente wie folgt aussieht:

var ListTasks = React.createClass({ 
    propTypes: { 
    initialTasks: React.PropTypes.array.isRequired, 
    completedTasks: React.PropTypes.bool.isRequired, 
    }, 

    getInitialState: function() { 
    return { 
     tasks: this.props.initialTasks, 
    }; 
    }, 

    render: function() { 
    return (
     <div> 
     {this.state.tasks 
     .filter(function(task, index, props) { 
      return task.completed === props.completedTasks; 
     }) 
     .map(function(task, index) { 
      return(
      <Task 
       name={task.name} 
       key={task.id} 
       completed={task.completed} 
       onCompleted={function() {this.onCompletedTask(index)}.bind(this)} 
       onRemove={function() {this.onRemoveTask(index)}.bind(this)} 
      /> 
     ); 
     }.bind(this))} 
     </div> 
    ); 
    } 
}); 

aber ich kippe die

completedTasks={true/false} 

auf die Filterfunktion mit

passieren

props.completedTasks 

Gibt es jemanden, der Ihnen bitte helfen kann?

Vielen Dank.

Answer 1

Das Problem liegt innerhalb der ListTasks-Komponente in der Rendermethode.

Der dritte Parameter der Array.filter Methode ist nicht die Komponente Requisiten, ist ein Array (Der Array-Filter wurde aufgerufen).

dies beheben Sie eine neue Variable (Requisiten) definieren und Sie es in Ihrem inneren Funktion durch lexical scoping Sie sehr viel

render: function() { 
    var props = this.props; 
    return (
     <div> 
     {this.state.tasks 
     .filter(function(task, index) { 
      return task.completed === props.completedTasks; 
     }) 
     .map(function(task, index) { 
      return(
      <Task 
       name={task.name} 
       key={task.id} 
       completed={task.completed} 
       onCompleted={function() {this.onCompletedTask(index)}.bind(this)} 
       onRemove={function() {this.onRemoveTask(index)}.bind(this)} 
      /> 
     ); 
     }.bind(this))} 
     </div> 
    ); 
    }