使用索环单击时更改按钮标签？答案

【问题标题】：Changing button label on click with grommet?使用索环单击时更改按钮标签？
【发布时间】：2020-07-28 12:40:24
【问题描述】：

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

【问题讨论】：

分享你的代码，

标签： reactjs next.js styled-components grommet

【解决方案1】：

以下是一些关于如何使按钮标签更改 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 的显示方式。

【讨论】：