[英]React - How to pass value to filter function in component?
I am trying to build a simple to-do app.我正在尝试构建一个简单的待办事项应用程序。
I store all my tasks in an array like this:我将所有任务存储在这样的数组中:
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,
},
];
and I want to list them in separated sections (todo/done) by passing boolean value as props to the listing component.并且我想通过将布尔值作为道具传递给列表组件来在单独的部分(待办事项/完成)中列出它们。
My component structure is here:我的组件结构在这里:
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>
);
}
});
and the listing component looks like this:列表组件如下所示:
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>
);
}
});
but I canť pass the但我可以通过
completedTasks={true/false}
to the filter function with到过滤器函数
props.completedTasks
is there anyone who can help please?有人可以帮忙吗?
Thanks a lot.非常感谢。
The issues is within ListTasks component in render method.问题出在渲染方法中的 ListTasks 组件中。
The 3rd parameter of the Array.filter method is not the component props , is an array ( The array filter was called upon). Array.filter方法的第三个参数不是组件 props ,是一个数组(调用了数组过滤器)。
To fix this you can define a new variable (props) and you can access it within your inner function through lexical scoping为了解决这个问题,您可以定义一个新变量(props),并且您可以通过词法范围在您的内部函数中访问它
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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.