onClick事件没有触发（反应redux todo列表应用程序）

Question

单击相应的li项目时，所有已完成和未完成的onClick事件未触发。当我点击li标签时，由于某种原因没有调用相应的功能。我无法在这里找到错误。

import React, { PropTypes } from 'react'
import {Component} from 'react'
import Todo from './Todo'
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {addTodo,toggleTodo,select_1,select_2,select_3} from 
'../actions/index'
import {all} from './todosall'
import {completed} from './todoscomp'
import {notCompleted} from './todosnotcomp'

class TodoList extends Component {
  render() {

const alltodos=() =>{
  return (
    <div> <all todos={this.props.todos} /> </div>
  )
}

const completed=() =>{
  return (
    <div> <completed todos={this.props.todos} /> </div>
  )
}

const notCompleted=() =>{
  return (
    <div> <notCompleted todos={this.props.todos} /> </div>
  )
}

console.log(this.props.todos)
return  (
  <div className='todo'>
  <form id="frm1">
        Add To Do: <input type="text" name="fname" id="todo" /><br></br>
        <input type="button" onClick={()=> this.props.actions.addTodo(document.getElementById("todo").value)} value="Submit" />
  </form>
  <div className="visible">
   <ul className=" visibility">
   <li onClick={alltodos}>

      AllToDos

  </li>

  <li onClick= {completed}>

      CompletedToDos

   </li>
   <li onClick={notCompleted}>

      NotCompletedToDos

   </li>

    </ul>
  </div>
  <ul className='todo__list'>
     {this.props.todos.map(t => (
       <li key={t.id} className='todo__item' onClick={() => this.props.actions.toggleTodo(t.id)}>
         <Todo todo={t} />
       </li>
     ))}
   </ul>
  </div>
)

} }

function mapStateToProps(state) {
   return {
    todos: state.todos
 }

}

  function mapDispatchToProps(dispatch) {
 return {
  actions: 
    bindActionCreators({addTodo,toggleTodo,select_1,select_2,select_3}, 
     dispatch)

 }

}

 export default connect(mapStateToProps,mapDispatchToProps)(TodoList);