如何使用ChakraUI中的任何按钮控制NumberInput ?

Question

我在ChakraUI中使用NumberInput如下:

<NumberInput
defaultValue={value}
min={0.00001}
type="type"
size="md"
onChange={setValue}
>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>

现在，正如您所看到的，我只有递增和递减步进器。但我还想添加按钮，如Clear,+10,+100,+1000等。

显然，当按钮被按下时，我可以很容易地通过调用setValue来处理值变化。但是，如何使更改显示在NumberInputField中?

我只发现useNumberInput钩提供了ChakraUI。然而，它是相当有限的，只适用于一些固定步骤的增量/递减情况。我还发现我可以给Box设置值，使它像<Box>{value}</Box>一样，但这样就不可能在框内键入任何内容。所以我很困惑如何实现我的目标。

Answer 1

您所需要做的就是传递有状态的value作为NumberInput的valueprop，如下所示:

<NumberInput
defaultValue={value}
min={0.00001}
type="type"
size="md"
onChange={setValue}
value={value}
>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>