在输入区域外输入 [数字] 箭头

【问题标题】：Input [number] arrows out of input area在输入区域外输入 [数字] 箭头
【发布时间】：2019-10-21 17:34:33
【问题描述】：

我有一个相当简单的 react 组件：

<Quantity type="number" value="1"></Quantity>

使用 StyledComponents 设置样式，如下所示：

const Quantity = styled.input`
border: 1px solid #000;
border-radius: 2px;
width: 48px;
height: 28px;
font-size: 18px;
text-align: center;
margin-right: 10px
`;

现在看起来像这样：

我想让它看起来像这样：

谢谢！

【问题讨论】：

我想这个链接会给你一些信息stackoverflow.com/a/45396364/5146848
我猜你不能从输入中取出那个微调器，而是你可以删除它并在外面添加自定义微调器

标签： javascript html reactjs styled-components

【解决方案1】：

您可以做的是隐藏默认的增量按钮并制作您自己的按钮来增加和减少状态值。

const Quantity = styled.input`
   border: 1px solid #000;
   border-radius: 2px;
   width: 48px;
   height: 28px;
   font-size: 18px;
   text-align: center;
   margin-right: 10px

   //hide the default button
   &::-webkit-appearance: textfield;
   &::-moz-appearance: textfield;
   appearance: textfield;

   &::-webkit-inner-spin-button, 
   &::-webkit-outer-spin-button 
   &::-webkit-appearance: none;

`;

const Incrementer = styled.button`
   ...
`;
const Decrementer = styled.button`
   ...
`;
...

const [inputValue, setInputValue] = useState(0);

...

<Incrementer onClick={() => setInputValue(inputValue + 1)} />
<Quantity value={inputValue}/>
<Decrementer onClick={() => setInputValue(inputValue - 1)} />

【讨论】：