Функция запускается один раз в крючке

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