函数是运行一次 hook

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

我第一次勾选复选框 return 和 console.log 功能时，当我尝试撤消勾选时，它根本不起作用

Answer 1

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

Answer 2

问题是您已将复选框类型定义为 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>
      )
    }

使用受控输入

示例代码

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

函数是运行一次 hook

Function is running one time in hook

reactjs

react-hooks

函数是 运行 一次 hook

Function is running one time in hook

reactjs

react-hooks

函数是运行一次 hook