reactjs - 函数在钩子中运行一次

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，当我尝试撤消检查时它永远不会工作

标签： reactjsreact-hooks

Answer 1

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