NextJS 13：在 Click 上不起作用，但组件使用“use client;”

Question

我尝试实现选择组件。但是，我注意到我的 onClick 函数不起作用。我不知道为什么，因为我使用了“使用客户端；”对于我的组件。

"use client";
import React from "react";
import styles from "./select.module.scss";

...

export const ChartSelect: React.FC<{
  chartType: "monthly" | "yearly" | "half-yearly";
  setChartType: React.Dispatch<
    React.SetStateAction<"monthly" | "yearly" | "half-yearly">
  >;
}> = (props) => {
  ...

  const handleOnClick = (value: "monthly" | "yearly" | "half-yearly") => {
    console.log("handleOnClick");
    props.setChartType(value);
  };

  return (
    <div className={styles.wrapper}>
      <div className={styles.select}>{findLabelByValue(props.chartType)}</div>
      <div className={styles.dropdown}>
        {options.map((option) => (
          <div
            className={styles.option}
            onClick={() => {
              console.log("PURE ONCLICK");
              handleOnClick(option.value);
            }}
          >
            {option.label}
          </div>
        ))}
      </div>
    </div>
  );
};

Answer 1

我使用 NextJS 13.4.19 也遇到同样的问题。

“使用客户端”根本不起作用。

我已经在这里演示了。两个分支。主分支不工作，工作分支工作 https://github.com/hencca/next-js-client

降级到 13.3 时，计数器起作用。