如何让复选框根据其检查状态做不同的事情 True/False

Question

好的，我有一个复选框，选中时它应该保存一些值，取消选中时它应该删除我刚刚取消选中的值。从我在 Material UI: Checkbox there is an "easy way" in the "Controlled" section but it didn't work so I try something else but is not working neither aaand now I'm stuck. I saw a similar problem and tried that Whosebug: 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

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

    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' }}
    />

如何让复选框根据其检查状态做不同的事情 True/False

How to make a checkbox do different things based on their check status True/False

checkbox

reactjs

material-ui