Question

onClick事件根本没有触发。我能够添加待办事项和切换待办事项但是当我点击Completed todos或NotCompleted 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

没有任何事情发生，因为，点击List元素会返回一个DOM，但无法显示它。

你应该这样做

class TodoList extends Component {
        state = {
            displayTodos: []
         }
        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={ () => {
             var todos = []
             todos = this.props.todos.map(todo => {
               return (<p> {todo.text} </p>)
             })
             this.setState({displayTodos: todos})
           }}>

              AllToDos


          </li>

           <li onClick={() => {
             var todos = [];
              this.props.todos.filter(todo => {
               if(todo.completed===true) {
                 todos.push(<p> {todo.text} </p>)
               }
              })
              this.setState({displayTodos: todos})
              }}>

              CompletedToDos

           </li>

           <li onClick={() => {
             var todos = []
             this.props.todos.filter(todo => {
               if(todo.completed===false) {
                 todos.push(<p> {todo.text} </p>)
               }
             })
             this.setState({displayTodos: todos})
              }}>

              NotCompletedToDos

           </li>

            </ul>
            <div>{this.state.displayTodos}</div>
          </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>
        )
      }
    }

另外，我个人会调用函数onClick，而不是按内联方式来增加代码readability

Answer 2

抱歉，但我不知道点击功能的目标是什么，它不会更改Component状态或props，因此不会渲染此组件。

class Multi:
    def __init__(self, *args):
        self.foos = args

    def __getattr__(self, key, *args, **kwargs):
        ret = []
        # two options - accessing values, or methods to call
        # this boolean decides which type to return (i'm sure there's a neater way, but this was quick)
        wrap = False

        # build a list of the attributes from foos
        for foo in self.foos:
            x = getattr(foo, key)
            if callable(x):
                wrap = True
            ret.append(x)

        # return an anonymous function that when called, returns a list
        # with the result of calling each callable with whatever args/kwargs
        if wrap:
            return lambda *args, **kwargs: [x(*args, **kwargs) for x in ret]

        # otherwise just return the list of values
        return ret

multi_f = Multi(f1, f2, f3, f4)
assert multi_f.x == [2, 3, 5, 7]  # attributes return a list of each of the objects in the multi_f
assert multi_f.bar(y=5) == [10, 10, 10, 10]  #  prints 2 then 3 then 5 then 7 but "5" is passed to all of them

onClick事件未在React redux ToDoList应用程序中触发

2 个答案: