如何使复选框根据其检查状态 True/False 执行不同的操作

Question

好吧，我有一个复选框，当被选中时，它应该保存一些值，当被取消选中时，它应该删除我刚刚取消选中的那个值。从我在Material UI: Checkbox 中看到的内容来看，“受控”部分中有一个“简单的方法”，但它没有用，所以我尝试了其他方法，但也没有用，现在我被卡住了。我看到了类似的问题并尝试了Stackoverflow: How to call 2 functions on onclick of a checkbox?。但显然这也不起作用，因为它来自常规复选框，但我想使用 Material UI 中的复选框。这就是我所拥有的：

Relevant code

const [studentID, setStudentID] = useState([])
const setStudent = (estudiante) => {
  var checkBox = document.getElementById('checkBox');
     if(checkBox.ariaChecked == true){
         console.log("Save data")
         let data = studentID;
         data.push(estudiante);
         setStudentID(data);
         console.log(studentID)
      } 
       else{
         console.log("Delete data")
        }  
}

                <Checkbox  
                color = "primary"
                id = "checkBox"
                onChange = {() => setStudent(estudiante.uid)}
                inputProps={{ 'aria-label': 'controlled' }}
                />

我尝试根据之前从其他帖子中看到的建议对其进行调整，但它不起作用，它只通过一个选项（我没有创建代码来删除刚刚添加的 console.log 的值）

如果我反转它们，这就是我尝试保存数据时的样子（这确实有效，但因为它只做一个或另一个重复）

非常感谢任何提示、建议、文档或帮助。如果需要其他内容，请告诉我。

Answer 1

首先，您需要控制组件的状态。这意味着您可以管理何时检查和未检查。为此，您需要向组件添加一个“已检查”属性，该属性将成为状态的一部分：

    const [ checked, setChecked ] = useState(false)

    <Checkbox  
      checked={checked}
      ...
    />

这部分完成后。现在你有两个选择。您可以按照您尝试的方式进行操作，代码将是这样的：

const [studentID, setStudentID] = useState([])
const [ checked, setChecked ] = useState(false)

const setStudent = (estudiante, check) => {
  console.log(estudiante, check) //here you will probably have the inverted value of the check because you are getting the old state. But you can work with it 
  setChecked(prevState => !prevState);
     if(check){
         console.log("Save data")
         let data = studentID;
         data.push(estudiante);
         setStudentID(data);
         console.log(studentID)
      } 
       else{
         console.log("Delete data")
        }  
}

    <Checkbox  
      checked={checked}
      color = "primary"
      id = "checkBox"
      onChange = {() => setStudent(estudiante.uid, checked)}
      inputProps={{ 'aria-label': 'controlled' }}
    />

第二个选项利用 useEffect 钩子：

    const [studentID, setStudentID] = useState([])
    const [ checked, setChecked ] = useState(false)
    const [ id, setId ] = useState(null)
    
    useEffect(() => {
       const setStudent = () => {
        if(checked){
          //your code
        }else{
          //your code
        }
       }
       // IMPORTANT: you need to remember that this useEffect is going to run once when the components just renders. So you need to put a condition here before calling the function 
       if(!isFirstTime){
          setStudent()
       }
    },[checked, id])

        <Checkbox  
          checked={checked}
          color = "primary"
          id = "checkBox"
          onChange = {() => {setId(estudiante.uid),setChecked(prevState => !prevState)}}
          inputProps={{ 'aria-label': 'controlled' }}
        />

更新：

既然你告诉我复选框在地图内。您可以使用数据状态来反映选中的复选框，例如：

const [studentID, setStudentID] = useState([])

// This is just an example code since I don't see all your code.
const setStudent = (estudiante) => {
  if (setStudentID.find(studentId => studentId === estudiante.uid)) {
    setStudentID([ ...data, estudiante])
    ... //your code
  }else{
    setStudentID(data.filter(studentId => studentId !== estudiante))
    ... //your code
  }
}

    <Checkbox  
      checked={setStudentID.find(studentId => studentId === estudiante.uid)}
      color = "primary"
      id = "checkBox"
      onChange = {() => setStudent(estudiante.uid)}
      inputProps={{ 'aria-label': 'controlled' }}
    />