Question

我有一个ButtonGroup，上面有几个按钮，当单击其中一个按钮时，我想更改其颜色，我想使它们的行为像单选按钮：

    <ButtonGroup>
      <Button
        variant={"info"}
        onClick={(e) => {
          ..otherFunctions..
          handleClick(e);
        }}
      >
        <img src={square} alt={".."} />
      </Button>
    </ButtonGroup>

    function handleClick(e) {
      console.log(e.variant);
    }

但这不起作用，e.variant未定义。

如果只是一个按钮，我将使用useState并且可以使它起作用，但是当有多个按钮时如何使它起作用，如何知道单击了哪个按钮并更改该按钮的变体道具？然后将其他按钮还原为variant =“ info”

我可以想到的另一种方法是创建自己的按钮，该按钮包裹引导程序按钮，这样我就可以访问内部状态并使用onClick来控制每个按钮的状态，但是我不知道这是否行得通，那样我该如何恢复其他未单击的按钮。？

Answer 1

除了上面我的评论之外，您可以创建自己的按钮组件来处理其自身的状态，而无需在主要组件中具有很多状态变量，例如

const ColourButton = ({ children }) => {
  const [colour, setColour] = React.useState(true)
  return (
    <button
      onClick={ () => setColour(!colour) }
      style = {{color: colour ? "red" : "blue"} }
    >
      { children }
    </button>
  )
}

这样，您可以将图像包装在新的ColourButton中：

<ColourButton><img src={square} alt={".."} /></ColourButton>

编辑： 我实际上很喜欢使用样式化组件并将属性传递给它们，而不是直接更改样式属性。例如https://styled-components.com/docs/basics#adapting-based-on-props

Answer 2

编辑：Kitson响应是在本地处理按钮状态的好方法：）

我喜欢用一个函数处理多个元素的生成。它允许我自定义handleClick。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [buttons, setButtons] = useState([
    {
      id: 1,
      variant: "info"
    },
    {
      id: 2,
      variant: "alert"
    }
  ]);

  const handleClick = id => {
    setButtons(previous_buttons => {
      return previous_buttons.map(b => {
        if (b.id !== id) return b;
        return {
          id,
          variant: "other color"
        };
      });
    });
  };

  const generateButtons = () => {
    return buttons.map(button => {
      return (
        <button key={button.id} onClick={() => handleClick(button.id)}>
          Hey {button.id} - {button.variant}
        </button>
      );
    });
  };
  return <div>{generateButtons()}</div>;
}

https://jrjvv.csb.app/

Answer 3

您可以为所选按钮维护状态变量。

DATABASE_URL=mysql://root:@127.0.0.1:3306/TheNorthGuards?serverVersion=5.7

这是一个有效的演示： https://codesandbox.io/live/OXm3G

通过onClick更改组件属性

3 个答案: