Question

目前，我正在学习Redux，现在遇到的问题是，当有人按下此按钮时，selectall复选框应该可以工作。结果是所有复选框都应该切换（选中或取消选中）。但是现在我坚持自己的逻辑。当某人调用selectAll函数时，它应该遍历所有输入复选框，并从那时开始应选中或取消选中所有复选框。

 await page.$$eval("input[data-bind='value: SyringeOut']",el=>{
            for(i=0; i<el.length; i++){
                el[i].value=3; 
            }
        });

我想要一个功能复选框，即当每个人单击该复选框时，都应切换选中或未选中状态。但是请记住，如果用户单击单个复选框，则它不会影响选中/取消选中按钮。

Answer 1

主要问题是您的复选框不是controlled inputs。您正在查看completed属性，以查看是否已选中这些框，但是它们的值未链接到该属性，并且当它们更改时不会更新状态。您需要将该值作为其checked属性提供给输入，并添加一个onChange处理程序以使其保持最新状态：

             {todos.map((todo, index) => {
                return (
                    <li key={todo.id}>
                        // checkbox should be toggling here when somene clicks on the selectAll checkbox. 
                        <input type="checkbox" checked={todo.completed} onChange={() => checkTodo(index)}/> 
                        {todo.text}
                        <span onClick={e => removeTodo(todo.id, 1)}>x</span>
                    </li>
                )
            } )}

对于处理程序，您需要添加一个新的动作和reducer大小写：

case 'CHECK_TODO':
            const copy = Array.from(state);
            copy[action.index].completed = !copy[action.index].completed;
            return copy;
            break;

您当然需要将索引添加到操作中，或者根据需要使用ID并映射其调度。同样，Junius指出，请确保您正确地引用了道具，但我认为您不需要this作为功能组件，也许我以前从未见过，但是我不要以为JSX组件会在没有括号的情况下呈现：

const CheckAll = (props) => {
  return (
    <div>
      <TodoList/> <input type="checkbox" onChange={e => {
            e.preventDefault();
            props.selectAll()
      }}/>
   </div>
  )
}

在Redux Reactjs中反应切换checkall按钮

1 个答案: