reactjs - 如何“不确定”复选框？

问题描述

您好我想知道如何将“不确定”应用于我的代码复选框示例：

我知道文档就在那里，但我无法让它工作这是我的尝试，我会说我很接近但显然错过了一些非常重要的东西

这个想法是，当我单击“父级”时，所有这些都被单击，所有这些都更改为已选中，并且所有这些都将数据发送到一个变量，当我取消单击时，它们应该将其删除，而当我特别删除一个时它应该只删除那个特别的（那个已经在工作，但是如果我必须为父级添加其他东西，那就别想了）

他们单独做我想做的事，但我想添加父/主，所以我可以检查所有这些：

这是我的代码：

[根据我目前收到的帮助编辑代码]

//Functions

//set all students
const [allStudentsID, setAllStudentsID] = useState([]);
const setAllStudents = () => {
  setAllStudentsID(Array.isArray(estudiantes) ? allStudentsID.length && estudiantes.length === allStudentsID.length ? [] : estudiantes.map(x=> x.id):[]);
  console.log(allStudentsID)
}

console.log 如下所示：

//set individual one by one (works)
const [studentID, setStudentID] = useState([])
const setStudent = (estudiante) => {
  if(!studentID.find(id => id === estudiante)){
    setStudentID([ ... studentID, estudiante]); 
 }  
  else {
   setStudentID(studentID.filter(studentId => studentId !== estudiante)) 
   }  

   console.log(studentID)
}

Mapping/Render:

//Titles (not sure if I'm setting up correctly the checkbox)
                <thead>

                    <tr className="Lista">
                        <Checkbox 
                        color = "primary" 
                        id = "checkBox" 
                        onChange = {() => setAllStudents()}
                        checked={allStudentsID.length === estudiantes.length}
                        indeterminate={allStudentsID.length > 0 && allStudentsID.length < estudiantes.length}
                        />

                        <th>Nombre</th>
                        <th>Colegio</th>
                        <th>Grado</th>
                        <th>Accion</th>
                    </tr>
                </thead>

//Table (this works)
{estudiantes.map((estudiantes, index) => (
                <tr key={estudiantes.id || index}>
                <td>
                <Checkbox
                checked={!!studentID.find( id => id === estudiantes.uid)}
                color = "primary"
                id = "checkBox"
                onChange = {() => setStudent(estudiantes.uid, index)}
                inputProps={{ 'aria-label': 'controlled' }}
                />
                </td>

... some code that will finish the table

标签： reactjscheckboxmaterial-ui

解决方案

根据您的代码和问题，当您estudiantes.uid用于处理复选框状态时，它可以工作，但在setAllStudents函数中，您使用x.label的是数组中不存在的，这就是您的控制台日志显示undefined. 也许尝试更新函数以id从函数返回。

将状态初始化为一个空数组

const [allStudentsID, setAllStudentsID] = useState([]);

如果已选中所有复选框，则更新setAllStudents以检查两个条件，然后将状态数组重置为空数组，否则选择全部。

const setAllStudents = () => {
  setAllStudentsID(Array.isArray(estudiantes) ? allStudentsID.length && estudiantes.length === allStudentsID.length ? [] : estudiantes.map(x=> x.id):[]);
  console.log(allStudentsID)
}

还请为标题中的复选框提供checkedand道具。indeterminate

<Checkbox 
  color = "primary" 
  id = "checkBox" 
  onChange = {() => setAllStudents()}
  checked={allStudentsID.length === estudiantes.length} // if both are equal, that means all were already selected
  indeterminate={allStudentsID.length > 0 && allStudentsID.length < estudiantes.length}
/>

reactjs - 如何“不确定”复选框？

问题描述

解决方案

推荐阅读