reactjs复选框检查和未选中事件

Question

我制作了一个待办事项应用程序，我想通过显示所有已完成的任务来即兴发挥它

检查“显示完成的任务”工作正常，并使用下面的代码向我显示所有已完成的任务

// App.js
filterCompleted = () => {
  this.setState({todos: [...this.state.todos.filter(todo => {return todo.completed === true})]})
}

// NavBar.js
<input type="checkbox" onChange={ () => this.props.filterCompleted()}></input> <span> Show completed 
task</span>

取消选中“显示已完成的任务”应该会让我回到原来的状态
我尝试检查复选框是否被选中，但下面的代码似乎不起作用。

// App.js
filterCompleted = (filter) => {
if(filter.checked){
  alert('checked')
  //this.setState({todos: [...this.state.todos.filter(todo => {return todo.completed === true})]})
}
else{
  alert('unchecked  ')
    }
}

//NavBar.js
input type="checkbox" onChange={() => this.props.filterCompleted(this)}></input> <span> Show completed task</span>

Answer 1

尝试在输入中发送event：

<input type="checkbox" onChange={event => this.props.filterCompleted(event)}></input> 
<span> Show completed task</span>

或者只是：

<input type="checkbox" onChange={this.props.filterCompleted}></input> 
<span> Show completed task</span>

在 App.js 中：

filterCompleted = event => {
   if(event.target.checked){
      alert('checked')
   } else {
     alert('unchecked  ')
   }
}

Answer 2

你需要发送复选框的状态来决定是否过滤：

// App.js
filterCompleted = (filter) => {
  this.setState({filteredTodos: [...this.state.todos.filter(todo => filter ? todo.completed : true)]})
}

// NavBar.js
<input type="checkbox" onChange={ e => this.props.filterCompleted(e.target.checked)}></input> <span> Show completed 
task</span>

确保在视图中迭代 state.filteredTodos，而不是 state.todos，并确保在开始时运行 this.filterCompleted(false)，以便将过滤的Todos 设置为完整数组。

请注意，有一个更好的方法可以做到这一点，那就是在渲染函数中过滤待办事项。比如：

render() {
    const filtered = this.state.todos.filter(t => this.state.filterCompleted ? t.completed : true);
    return (
        this.filtered.map(...); // render component here
    )
}

在这种情况下，您只需在用户切换复选框时切换 state.filterCompleted。

(注意箭头函数的轻微简化。如果你的箭头函数以return开头，那么去掉大括号和return。没有大括号的箭头函数有一个隐含的return。使它更简单并且更容易阅读。）