onClickイベントがReact redux ToDoListアプリケーションで起動しない

Question

onClickイベントは発生していません。todosを追加してtodosを切り替えることができますが、完了したtodosまたはNotCompleted todosをクリックしても何も起こりません。クラス。 todosを追加するための追加があります。それで、todoを打つまたは打ち消すトグルがあります。私が持っている問題はCompletedTodosとNotCompletedTodosのリスト項目です。

class TodoList extends Component { 
    render() { 

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={() => { 

    return(<div> {this.props.todos.map(todo => { 
     return (<p> {todo.text} </p>) 
    })}</div>) 
    }}> 

     AllToDos 


    </li> 

    <li onClick={() => { 
    return (<div> {this.props.todos.filter(todo => { 
     if(todo.completed===true) { 
     return (<p> {todo.text} </p>) 
     } 

    })}</div>) 
     }}> 

     CompletedToDos 

    </li> 

    <li onClick={() => { 
    return (<div> {this.props.todos.filter(todo => { 
     if(todo.completed===false) { 
     return (<p> {todo.text} </p>) 
     } 
    })}</div>) 
     }}> 

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

Answer 1

申し訳ありません、しかし、私はそれがコンポーネントの状態や小道具を変更しない 、クリック機能の対象だか分からないので、この成分は表示されません。 onclickのList要素のDOMを返しますが、どこにも、あなたがそれを表示されていない、ので

<li onClick={() => { 
    return (<div> {this.props.todos.filter(todo => { 
     if(todo.completed===true) { 
     return (<p> {todo.text} </p>) 
     } 

    })}</div>) 
     }}> 

     CompletedToDos 

    </li> 

    <li onClick={() => { 
    return (<div> {this.props.todos.filter(todo => { 
     if(todo.completed===false) { 
     return (<p> {todo.text} </p>) 
     } 
    })}</div>) 
     }}> 

     NotCompletedToDos 

    </li> 

Answer 2

何も起こりません。

あなたはまた、私は個人的に機能onClickを呼ぶだろうではなく、コードreadability