主页 / 问题 / 1548505
Accepted
Максим
Asked:2023-10-29 15:57:25 +0000 UTC2023-10-29 15:57:25 +0000 UTC

将参数从子元素传递给函数时，页面无法加载

  • 772

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

盒子.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函数后，页面会无休止地加载。

可能是什么问题呢？没有参数一切正常

reactjs

1 个回答

  1. Best Answer

    在您的事件道具中，在您的情况下onClick，您需要传递函数本身，而不是它的调用：

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

    如果您需要将参数传递给被调用的函数（如本例所示），请将其包装在另一个函数中：

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

相关问题