reactjs - 使用索环单击时更改按钮标签？

Question

在使用索环 UI 和样式化组件时，是否有人对单击时更改按钮标签有任何见解？只使用自定义按钮而不是扣眼更容易吗？

Answer 1

以下是一些关于如何使 Button 标签更改 onClick 操作的示例：

import React, { useState } from "react";
import { render } from "react-dom";

import { grommet, Box, Button, Grommet, Text } from "grommet";

const App = () => {
  const [label, setLabel] = useState(1);
  const [name, setName] = useState("shimi");

  const flipName = name => {
    return name === "shimi" ? setName("shai") : setName("shimi");
  };

  return (
    <Grommet theme={grommet}>
      <Box pad="small" gap="small" width="small">
        // label is a number that is being increased on every click event
        <Button
          label={label}
          onClick={() => {
            setLabel(label + 1);
          }}
        />
        // label string is controlled with external logic outside of the button.
        <Button
          label={<Text weight="400">{name}</Text>}
          onClick={() => {
            flipName(name);
          }}
        />
      </Box>
    </Grommet>
  );
};

render(<App />, document.getElementById("root"));

除了上面的示例，在 Grommet 中，您不必使用label道具，您可以利用 Button 子项来控制 Button 的显示方式。