按钮不可点击（反应组件）

Question

创建了一个右侧有登录和注册按钮的组件，并且此处的注册按钮不可点击。 这是组件的代码=>

从“react”导入React；

导出默认函数 Abar() {

const handleClick = () => {
    console.log("Eee");
};

const styles = {
    body: {
        margin: 0,
        fontFamily: "Arial, sans-serif"
    },
    flexContainer: {
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        padding: "10px 20px",
        backgroundColor: "black",
        color: "white"
    },
    skillSphereTitle: {
        fontSize: "24px"
    },
    buttonContainer: {
        display: "flex",
        gap: "10px"
    },
    button: {
        color: "white",
        border: "1px solid transparent",
        borderTop: "4px solid #0169AD",
        backgroundColor: "black",
        cursor: "pointer",
        padding: "10px 20px"
    }
};

return (
    <div style={styles.flexContainer}>
        <div>
            <h6 style={styles.skillSphereTitle}>
                Skill Sphere
            </h6>
        </div>
        <div style={styles.buttonContainer}>
            <button
                type="button"
                style={styles.button}
                onClick={() => console.log("Rohan")}
            >
                Sign Up
            </button>
            <button
                type="button"
                style={styles.button}
                onClick={() => console.log("Rohan")}
            >
                Sign In
            </button>
        </div>
    </div>
);

}

尝试了互联网上的所有方法，它解决了问题

Answer 1

您的代码是正确的。也许您在两个按钮上打印相同的文本，这就是为什么无法弄清楚它是否有效。

尝试在按钮上打印不同的消息。

<button
  type="button"
  style={styles.button}
  onClick={() => console.log("Sign up clicked")}
>
  Sign Up
</button>