Question

我正在尝试创建一个可选择的按钮，以便在表单中创建任务时选择容易、中等和困难

在这种情况下，当他点击easy时，改变颜色就是选择，例如：

简单：绿色介质：黄色高：红色

我的 tsx 组件看起来像这样

interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  name: string;
}

const Priority: React.FC<IButtonProps> = ({ name, ...props }) => {
  const inputRef = useRef<HTMLButtonElement>(null);
  const [priority, setPriorite] = useState("");

  const { fieldName, defaultValue, error, registerField } = useField(name);

  useEffect(() => {
    registerField({
      name: fieldName,
      ref: inputRef.current,
      path: "value",
    });
  }, [fieldName, registerField]);

  return (
    <Container
      ref={inputRef}
      isActive={priority === "Low"}
      activeColor="red"
      defaultValue={defaultValue}
      {...props}
    />
  );
};

我的样式组件看起来像这样

interface RadioBoxProps {
  isActive: boolean;
  activeColor: string;
}

const colors: { [key: string]: any } = {
  red: "red",
  green: "green",
  blue: "blue",
};

export const Container = styled.button<RadioBoxProps>`
  display: flex;
  align-items: center;
  justify-content: center;

  height: 2.5rem;
  border: 2px solid;

  font: 1rem Poppins;
  background: transparent;

  border-radius: 0.25rem;

  transition: border-color 0.2s;

  background: ${(props) =>
    props.isActive ? colors[props.activeColor] : "transparent"};
`;

我想知道当我选择它时，它没有分配给它的颜色以发送到后端的错误

反应按钮选择更改颜色

0 个答案: