Morton's questions

我参考了官方文档

https://chakra-ui.com/docs/components/number-input

示例用户可以单击 inc 和 dec 图标来更改值，也可以直接在文本框中输入。

import {
  ChakraProvider,
  Stack,
  HStack,
  Button,
  Input,
  useNumberInput
} from "@chakra-ui/react";

  const { getInputProps, getIncrementButtonProps, getDecrementButtonProps } =
    useNumberInput({
        step: 0.01,
        defaultValue: 0.5,
        min: 0.01,
        max: 1.0,
        precision: 2,
    })

  const inc = getIncrementButtonProps()
  const dec = getDecrementButtonProps()
  const input = getInputProps()

  return (
    <Stack>
    <HStack maxW='320px'>
      <Button {...inc}>+</Button>
      <Input {...input} />
      <Button {...dec}>-</Button>
    </HStack>
    </Stack>
  );

然后我想用其他按钮改变值，所以我尝试使用setState，经过一番尝试发现不能使用defaultValuein useNumberInput，所以我使用value和onChange。

const [limiInputValue, setLimitInputValue] = useState(0.5);

  const { getInputProps, getIncrementButtonProps, getDecrementButtonProps } =
    useNumberInput({
        step: 0.01,
        // defaultValue: limiInputValue,
        min: 0.01,
        max: 1.0,
        precision: 2,
        value: limiInputValue,
        onChange: value => {
          console.log('onChange value', value);
          setLimitInputValue(Number(value));
        },
    })

  const inc = getIncrementButtonProps()
  const dec = getDecrementButtonProps()
  const input = getInputProps()

  return (
    <Stack>
    <HStack maxW='320px'>
      <Button {...inc}>+</Button>
      <Input {...input} />
      <Button {...dec}>-</Button>
    </HStack>
    <Button onClick={() =>  setLimitInputValue(0.25)}>Set</Button>
    </Stack>
  );

一切都很好，但我有一个问题是用户无法Input直接输入小数点。

如何修复它？

这是我的沙箱示例：

https://codesandbox.io/p/devbox/twk7v6?file=%2Fsrc%2Findex.tsx%3A19%2C18

如何像这张照片一样在三角形内添加绿色条？

我尝试添加三角形CSS，但我不知道如何将绿色条写入三角形CSS。

CSS 文件：

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 210px 100vw;
    border-color: transparent transparent #1a202c;
}

布局代码：

<div className={styles.triangle} />

我使用gridwith css，如果数组编号是一、二或三，我需要确保元素位于中心。

<div className={styles.testWrap}>
  <div className={styles.testGrid}>
    {array.map((value, index) => {
      return (
        <div className={styles.logoBox} key={index}>
          <div
            onClick={() => router.push({ pathname: `./brand/${brand.id}` })}
            className={styles.logoContainer}
          >
            <NextImage src={brand.logoUrl} width={180} height={180} alt="pic" />
          </div>
        </div>
      );
    })}
</div>

CSS

.testWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: pink;
    .testGrid {
        display: grid;
        width: 100%;
        gap: 24px;
        justify-content: center;
        margin-bottom: 130px;
        @include sm {
            width: fit-content;
            margin: 0 auto;
            grid-template-columns: auto auto;
            grid-template-rows: auto auto;
            margin-bottom: 197px;
        }
        @include md {
            // grid-template-columns: auto auto auto; if array number is three
            // grid-template-columns: auto auto; if array number is two
            // grid-template-columns: auto; if array number is one
            grid-template-columns: params; // How do I get dynamic params over here ?
            justify-content: center;
            grid-gap: 55px;
            width: 100%;
            margin-bottom: 195px;
        }
    }
}