Question

我正在尝试构建一个简单的待办事项。

我将所有任务存储在这样的数组中：

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,
  },
];

我希望通过将boolean值作为props传递给列表组件，将它们列在单独的部分（todo / done）中。

我的组件结构在这里：

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

，列表组件如下所示：

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

但我可以通过

completedTasks={true/false}

到过滤器功能

props.completedTasks

有谁可以帮忙吗？

非常感谢。

Answer 1

问题出在render方法的ListTasks组件中。

Array.filter方法的第3个参数不是组件props，是一个数组（调用了数组过滤器）。

要解决此问题，您可以定义一个新变量（道具），然后您可以通过lexical scoping

在内部函数中访问它

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

React - 如何将值传递给组件中的过滤函数？

1 个答案: