功能在钩子中运行一次

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

问题是，您将复选框类型定义为radio，并且使用了不受控制的输入，因此它不允许您切换。

您有两个解决方案

1. 将类型更改为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>
      )
    }

2. 使用受控输入

示例代码

export default function AddSections ({ onCheckItem }) {
      const [checked, setChecked] = useState('');
      const checkItem = (item) => {
          setChecked(checked => (checked == item? '': item));
      }
      return (
            <div>
                  <Checkbox
                    className="section_item"
                    key={index}
                    id={section.name}
                    name="add-sections"
                    checked={checked === item}
                    type="radio"
                    label={'section.label'}
                    value={'section.name'}
                    onChange={val => checkItem(item)}
                  />
        </div>
      )
    }

Answer 2

我想 Checkbox组件将把道具映射到本机复选框元素。如果是这种情况，则应使用checked Prop。我的代码中没有看到任何钩子。

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>
      )
    }