При передачи в функцию параметров из дочернего элемента страница не грузится

Question

Manipulator.tsx родительский элемент

    const handleAdd = (index:string) => {
        const l = boxes.length + 1;
        const a = "Box-" + l;
        alert(index)
        const New = {
          id: a,
          order: boxes.length,
        };
        //
        setBoxes(boxes => [...boxes, New])
      };
...
return(
  <Box
              key={box.id}
              boxNumber={box.id}
              handleDrag={handleDrag}
              handleDrop={handleDrop}
              handleAdd={handleAdd}
            />
)

Box.tsx

import React from 'react'
import styles from "./manipulator.module.scss"
type Props = {
boxNumber: string;
handleDrag:any;
handleDrop:any;
handleAdd: any
}

const Box = ({  boxNumber, handleDrag, handleDrop,handleAdd } :Props) => {
 
  return (
    <div className={styles.wrap_box}>
       <div className={styles.addTop} >+</div>
    <div
    className={styles.box}

    draggable={true}
    id={boxNumber}
    onDragOver={(ev) => ev.preventDefault()}
    onDragStart={handleDrag}
    onDrop={handleDrop}
    
  >
  
    {boxNumber}
    <input/>
   
  </div>
   <div className={styles.addBottom} onClick={handleAdd('Привет')}>+</div>
  </div>
  )
}

export default Box

после того как я начинаю передавать параметры в функцию handleAdd страница бесконечно грузится.

В чем может быть проблема? без параметров все хорошо работает

Answer 1

В пропсы событий, в твоём случае onClick, нужно передавать саму функцию, а не её вызов:

</div>
  <div className={styles.addBottom} onClick={handleAdd}>+</div>
</div>

Если нужно передать аргументы в вызываемую функцию, как в этом случае, заверни её в другую функцию:

</div>
  <div className={styles.addBottom} onClick={() => handleAdd('Привет')}>+</div>
</div>

БЛОГ НА HUSL

При передачи в функцию параметров из дочернего элемента страница не грузится

Ответы (1 шт):