我收到“Uncaught TypeError: props.handleSelect is not a function”

Question

我正在尝试使用 TailwindCSS 和 Vite 创建自定义组件。传递函数时出现错误“未捕获类型错误：props.handleSelect 不是函数”。

const Navbar = () => {
  const handleSelect = (option) => {
    option == "Home"
      ? console.log(option)
      : option == "View Submissions"
      ? console.log(option)
      : console.log(option);
  };

  return (
    <div
      className={`bg-primary-700 flex min-h-[50px] min-w-[100vh] flex-row items-center justify-between p-[5px] text-white `}
    >
      <div
        onClick={() => {
          navigate("/home");
        }}
        className={`pl-[20px] font-semibold hover:cursor-pointer`}
      >
        MICROTEK
      </div>
      <div className={`mr-[10px] flex flex-row`}>
        <Menu2
          placeholder="Navigate"
          options={["View Submissions", "Home"]}
          onSelect={handleSelect}
        ></Menu2>
      </div>
    </div>
  );
};

菜单2

const Menu2 = (props) => {
  const [click, setClick] = useState(false);

  return (
    <div>
      <button
        name={props.name}
        id={props.id}
        required={props.required}
        value={props.value}
        onClick={() => {
          setClick(!click);
        }}
        onChange={props.onChange}
        className={
          `${props.className} ` +
          ` flex min-w-[100px] flex-row items-center  justify-between rounded font-semibold ${
            click ? "bg-primary-700" : "bg-none"
          } border-primary-700 hover:bg-primary-700 border-[2px] pl-[10px]`
        }
      >
        {props.placeholder}
        {click == true ? (
          <img
            src={upIcon}
            style={{ marginTop: "2px", margin: "9px" }}
            height="10px"
            width="20px"
          ></img>
        ) : (
          <img
            src={downIcon}
            style={{ marginTop: "2px", margin: "9px" }}
            height="10px"
            width="20px"
          ></img>
        )}
      </button>

      <div
        className={`${
          click == true ? "" : "hidden"
        }  animate-ease-out shadow-primary-700 absolute min-h-[40px] min-w-[100px] max-w-[200px] rounded bg-white text-black shadow-md`}
      >
        {props.options?.map((options) => {
          return (
            <div
              className="hover:bg-primary-700 p-[10px] hover:text-white "
              key={options}
              onClick={() => {
                props.handleSelect(options);
              }}
            >
              {options}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Menu2;

我看过其他答案，他们提到使用

props

或

{handleSelect}

两者都不起作用。

Answer 1

你像这样传递

handleSelect

道具 -

onSelect={handleSelect}

，所以在

Menu2

组件中你可以像

props.onSelect(options);

一样访问它。

Answer 2

根据@Clarity 的建议，尝试在您的

console.log(props)

文件中添加一个

Menu.js

。

const Menu2 = (props) => {
  const [click, setClick] = useState(false);
  //this will indicate which props are getting passed
  console.log(props);  

  ...
}

目前，您的函数

handleSelect

接受一个参数作为输入。因此，请尝试如下修改您的代码：

将

handleSelect

函数作为

prop

与

same name

一起传递。

 <div className={`mr-[10px] flex flex-row`}>
    <Menu2
      placeholder="Navigate"
      options={["View Submissions", "Home"]}
      handleSelect={(option) => handleSelect(option)}
    ></Menu2>
  </div>

现在，在 Menu.js 中，使用以下代码：

  {props.options?.map((options) => {
        return (
        <div
          className="hover:bg-primary-700 p-[10px] hover:text-white "
          key={options}
          onClick={() => props.handleSelect(options)}
         >
          {options}
        </div>
      );
    })}

输出

单击时，您应该会看到选定的

option

。现在您可以根据您的要求添加剩余的逻辑。

希望有帮助。