Question

我有一个像这样的钩子：

    export default function AddSections ({ onCheckItem }) {

      const checkItem = (item) => {
console.log('check')

      }

      return (
 <div>
                  <Checkbox
                    className="section_item"
                    key={index}
                    id={section.name}
                    name="add-sections"
                    type="radio"
                    label={'section.label'}
                    value={'section.name'}
                    onChange={val => checkItem(item)}
                  />


        </div>
      )
    }

当我第一次选中该复选框时，该函数将返回console.log，当我尝试撤消该检查时，它将永远无法工作

Answer 1

问题是您已将Checkbox类型定义为$("#exportPDF").click(() => { let svg = new XMLSerializer().serializeToString(document.getElementById("Employement_Source")); let canvas = document.createElement("canvas"); let svgSize = $(svg)[0]; // let svgSize = $(svg)[0].getBoundingClientRect(); canvas.width = svgSize.width.baseVal.value; canvas.height = svgSize.height.baseVal.value; let ctx = canvas.getContext("2d"); let doc = new jsPDF({ orientation: 'l', unit: 'px' }); let img = document.createElement("img"); img.onload = () => { ctx.drawImage(img, 0, 0); // console.log(canvas.toDataURL("image/png")); doc.setFontSize(11); doc.text(5, 10, 'D3 Chart'); doc.addImage(canvas.toDataURL("image/png"), 'PNG', 10, 10); doc.save('download.pdf'); }; img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svg)); });，并且正在使用不受控制的输入，因此不允许您进行切换。

您有两种解决方案

将类型更改为radio

示例代码：

checkbox

使用受控输入

示例代码

export default function AddSections ({ onCheckItem }) {

      const checkItem = (item) => {
console.log('check')

      }

      return (
            <div>
                  <Checkbox
                    className="section_item"
                    key={index}
                    id={section.name}
                    name="add-sections"
                    type="checkbox"
                    label={'section.label'}
                    value={'section.name'}
                    onChange={val => checkItem(item)}
                  />


        </div>
      )
    }

Answer 2

我想Checkbox组件将把道具映射到本地复选框元素。在这种情况下，您也应该使用checked属性。我在您的代码中看不到任何钩子。

import React, {useState, useEffect} from 'react'

export default function AddSections ({ onCheckItem }) {

      const [checked, setChecked] = useState(false)

      const handleCheckItem = (item) => {
            setChecked(!checked)
      }

      useEffect(() => {
        console.log('clicked')
      }, [checked])

      return (
              <div>
                  <Checkbox
                    className="section_item"
                    key={index}
                    id={section.name}
                    name="add-sections"
                    type="radio"
                    label={'section.label'}
                    value={'section.name'}
                    checked={checked}
                    onChange={handleCheckItem}
                  />
        </div>
      )
    }

函数在挂钩中运行一次

2 个答案: