React Typescript：如何改变按钮的颜色后，它被点击？

6uxekuva 于 2023-04-22 发布在 TypeScript

关注(0)|答案(2)|浏览(152)

我试图添加一个按钮组件到我的项目中，并在渲染JSX时包含其中的子项，我希望按钮在单击后更改颜色。我的项目中有三个文件，它们在DOM中返回不同的结果，我希望将这些JSX.Element函数传递到它们中，以便可以在每个组件中使用，而不会在每个组件文件中重复自己。
我尝试创建一个按钮函数，代码如下：
Button.tsx

import { useState } from "react";

export function Button() {
  const [color, setColor] = useState("pink");
  const [textColor, setTextColor] = useState("green");
  return (
    <button
      style={{ background: color, color: textColor }}
      className="statusButton"
      onClick={() => {
        setColor("pink");
        setTextColor("green");
      }}
    ></button>
  );
}

我尝试将Button传递到的活动组件：
Active.tsx

import { Button } from "./Button"

export const ActiveTasks = (props: {
// passing props to JSX components
  newTask: () => void;
  toDos: ToDo[];
  showAllTasks: () => void;
  showDone: () => void;
  setToDos: (value: React.SetStateAction<ToDo[]>) => void;
}) => {

return(
// Left out code in rest of App, below is where I want to pass in the Button function and include children.
 <div className="status-container">
// 
          <Button
            id="allButton"
            className="statusButton"
            onClick={props.showAllTasks}
          >
            All

          </Button>
);
}

当我在我的项目中尝试这个时，我得到了以下错误：TS 2322：类型'{子项：string; id：string; className：string; onClick：（）void;“}”不能分配给类型“IntrinsicAttributes”。类型“IntrinsicAttributes”上不存在属性“children”。
我在状态容器div中添加了Button函数，示例如下：

<div className="status-container">
          <button
            id="allButton"
            className="statusButton"
            onClick={props.showAllTasks}
          >
            <Button />
            All
         </button>

只是为了看看代码是否工作。正如预期的那样，它返回了一个额外的按钮，我只想上面的更改只对我的“statusButton”我怎么能这样做呢？

typescript

来源：https://stackoverflow.com/questions/76022481/react-typescript-how-to-change-color-of-button-after-it-is-clicked

2条答案

按热度按时间

j5fpnvbx1#

要发送一个孩子，你需要定义 prop ，你可以试试这个，

type ButtonProps = PropsWithChildren<{}>

然后将其用于

export function Button(props :ButtonProps) {

现在在代码的下一部分引用props.children。
总结一下

import { useState } from "react";
type ButtonProps = PropsWithChildren<{}>
export function Button(props :ButtonProps) {
  const [color, setColor] = useState("pink");
  const [textColor, setTextColor] = useState("green");
  return (
    <button
      style={{ background: color, color: textColor }}
      className="btn btn-primary"
      onClick={() => {
        setColor("pink");
        setTextColor("green");
      }}
    >{props.children}</button>
  );
}

这应该可以解决你的问题。进一步改进这段代码，我建议你定义一个从HTML按钮扩展 prop 的 prop ，这样你仍然可以得到所有HTML定义的 prop 沿着你的自定义 prop ，增强的代码是这样的，

type ButtonProps = React.HTMLProps<HTMLButtonElement>
export function Button(props :ButtonProps) {
  const [color, setColor] = useState("pink");
  const [textColor, setTextColor] = useState("green");
  return (
    <button
      {...props}
      style={{ background: color, color: textColor, ...(props && props.style) }}
      className=`btn btn-primary + ${props.className ? props.className: ''}`
      onClick={(e) => {
        setColor("pink");
        setTextColor("green");
        props.onClick ?? props.onClick(e);
      }}
    />
  );
}

赞(0）回复(0）举报 2023-04-22

r6hnlfcb2#

这是一个简单的Typescript错误;您没有定义Button组件可以接受子组件。
只需将Button组件定义修改为如下所示：

export const Button: React.FC = ({ children }) => {

当然，使用children prop 。
完整版本：

export const Button: React.FC = ({ children }) => {
  const [color, setColor] = useState("pink");
  const [textColor, setTextColor] = useState("green");
  return (
    <button
      style={{ background: color, color: textColor }}
      className="btn btn-primary"
      onClick={() => {
        setColor("pink");
        setTextColor("green");
      }}
    >
      {children}
    </button>
  );
};

赞(0）回复(0）举报 2023-04-22

我来回答

React Typescript：如何改变按钮的颜色后，它被点击？

2条答案

相关问题

热门标签

最新问答