将Input组件的”type”属性设置为”number”时,使用”max”属性在Chakra-UI中的应用。

huangapple go评论62阅读模式
英文:

Setting "max" on an Input with type "number" in Chakra-UI

问题

以下是您要翻译的内容:

"While building a user interface with a few inputs, I decided to migrate the base input components to form a single component I can use, while that's not really the problem. Here's the code for it. For easy and memorable use for Inputs."

"在构建具有一些输入的用户界面时,我决定将基本输入组件迁移到一个我可以使用的单个组件中,尽管这并不是真正的问题。以下是它的代码。用于输入的简单且易记的使用。"

import {
  FormControl,
  FormErrorMessage,
  FormHelperText,
  FormLabel,
  Input,
} from "@chakra-ui/react";

const DefaultInput = ({
  isInvalid,
  label,
  helperText,
  errorMessage,
  ...otherProps
}) => {
  return (
    <FormControl isInvalid={isInvalid}>
      {label && <FormLabel>{label}</FormLabel>}
      <Input
        variant="outline"
        padding="25px 10px"
        margin="10px 0px"
        border="0px"
        {...(isInvalid && { border: "0px" })}
        {...otherProps}
      />
      {!isInvalid ? (
        <FormHelperText>{helperText}</FormHelperText>
      ) : (
        <FormErrorMessage>{errorMessage}</FormErrorMessage>
      )}
    </FormControl>
  );
};

export default DefaultInput;

"Used it like this but it doesn't seem to take notice of the 'max' property."

"像这样使用它,但似乎没有注意到 'max' 属性。"

<DefaultInput
   value={custom.credits}
   isInvalid={creditsError}
   helperText="最低 50 积分。"
   errorMessage="请输入大于 50 的有效数字。"
   maxW={isNotSmallerScreen ? "50%" : "70%"}
   fontSize={!isNotSmallerScreen ? "12px" : "16px"}
   onChange={handleCustomCredit}
   type="number"
   placeholder="输入积分"
   name="credits"
   max="5000"
/>

"I've also tried manually declaring the 'max' and 'type' within the component I created but still nothing."

"我还尝试在我创建的组件中手动声明 'max' 和 'type',但仍然没有效果。"

.....
      <Input
        variant="outline"
        padding="25px 10px"
        margin="10px 0px"
        border="0px"
        max="5000"
        type="number"
        {...(isInvalid && { border: "0px" })}
        {...otherProps}
      />
.....
英文:

While building a user interface with a few inputs, I decided to migrate the base input components to form a single component I can use, while that's not really the problem. Here's the code for it. For easy and memorable use for Inputs.

import {
  FormControl,
  FormErrorMessage,
  FormHelperText,
  FormLabel,
  Input,
} from &quot;@chakra-ui/react&quot;;

const DefaultInput = ({
  isInvalid,
  label,
  helperText,
  errorMessage,
  ...otherProps
}) =&gt; {
  return (
    &lt;FormControl isInvalid={isInvalid}&gt;
      {label &amp;&amp; &lt;FormLabel&gt;{label}&lt;/FormLabel&gt;}
      &lt;Input
        variant=&quot;outline&quot;
        padding=&quot;25px 10px&quot;
        margin=&quot;10px 0px&quot;
        border={&quot;0px&quot;}
        {...(isInvalid &amp;&amp; { border: &quot;0px&quot; })}
        {...otherProps}
      /&gt;
      {!isInvalid ? (
        &lt;FormHelperText&gt;{helperText}&lt;/FormHelperText&gt;
      ) : (
        &lt;FormErrorMessage&gt;{errorMessage}&lt;/FormErrorMessage&gt;
      )}
    &lt;/FormControl&gt;
  );
};

export default DefaultInput;

Used it like this but it doesn't seem to take notice of the "max" property.

&lt;DefaultInput
   value={custom.credits}
   isInvalid={creditsError}
   helperText={&quot;Minimum of 50 Credits.&quot;}
   errorMessage={&quot;Please enter a valid number above 50.&quot;}
   maxW={isNotSmallerScreen ? &quot;50%&quot; : &quot;70%&quot;}
   fontSize={!isNotSmallerScreen ? &quot;12px&quot; : &quot;16px&quot;}
   onChange={handleCustomCredit}
   type=&quot;number&quot;
   placeholder=&quot;Enter Credits&quot;
   name=&quot;credits&quot;
   max=&quot;5000&quot;
/&gt;

I've also tried manually declaring the "max" and "type" within the component I created but still nothing.

.....
      &lt;Input
        variant=&quot;outline&quot;
        padding=&quot;25px 10px&quot;
        margin=&quot;10px 0px&quot;
        border={&quot;0px&quot;}
        max=&quot;5000&quot;
        type=&quot;number&quot;
        {...(isInvalid &amp;&amp; { border: &quot;0px&quot; })}
        {...otherProps}
      /&gt;
.....

答案1

得分: 1

这实际上是浏览器的一种怪癖,与 Chakra 无关。max HTML5 属性实际上不会限制您在提交包含表单之前输入较大的数字。如果您希望实时限制输入,您需要构建自己的函数。

除非您在提交时也看不到任何内容?请参考应该看到的示例:https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_max_min。

英文:

This is actually a browser quirk and not related to Chakra. max HTML5 attribute won't actually restrict you from typing larger numbers until you submit the containing form. If you want to limit it on the fly you have to build out your own function.

Unless you aren't seeing anything on submit either? See this example of what you should see https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_max_min.

huangapple
  • 本文由 发表于 2023年2月18日 02:06:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/75487845.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定