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.todos上遍历state.filteredTodos，并确保在开始时运行this.filterCompleted（false），以便将filteredTodos设置为完整数组。

请注意，有更好的方法可以执行此操作，即在渲染功能中过滤待办事项。像这样：

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。没有括号的箭头功能具有隐式{{1 }}。使其更易于阅读。）