CurrencyFormat组件渲染异常：复选框显示为文本输入框问题咨询

Hey there, I've run into this exact issue before with react-currency-format! The root problem here is how you're combining the renderText callback, display="text" property, and your checkbox input—this combination confuses the component's rendering logic, causing the checkbox to be incorrectly parsed as a text input.

Here are two solid solutions to fix this:

Solution 1: Move the Checkbox Outside CurrencyFormat #

The cleanest fix is to separate your gift checkbox from the currency formatting logic entirely. This way, the CurrencyFormat component only handles what it's designed for (displaying formatted amounts) and doesn't interfere with your form elements:

<div className="subtotal">
  {/* Only handle currency formatting here */}
  <CurrencyFormat
    renderText={(value) => (
      <p>
        Subtotal ({basket?.length} items):
        <strong> {` ${value}`}</strong>
      </p>
    )}
    decimalScale={2}
    value={0}
    display={"text"}
    thousandSeparator={true}
    prefix={"$"}
  />
  
  {/* Checkbox lives outside, no interference */}
  <small className="subtotal__gift">
    <input type="checkbox"/> This order contains a gift
  </small>
</div>

Solution 2: Remove the Redundant display="text" Property #

When you use the renderText prop, the CurrencyFormat component already skips rendering its default input field and instead renders whatever JSX you return. The display="text" property is redundant here and actually causes the component to treat your entire renderText output as plain text (which breaks the checkbox). Just remove it:

<CurrencyFormat
  renderText={(value) => (
    <>
      <p>
        Subtotal ({basket?.length} items):
        <strong> {` ${value}`}</strong>
      </p>
      <small className="subtotal__gift">
        <input type="checkbox"/> This order contains a gift
      </small>
    </>
  )}
  decimalScale={2}
  value={0}
  thousandSeparator={true}
  prefix={"$"}
/>

Quick Additional Tip #

If you're still seeing issues, double-check your react-currency-format version—older versions had bugs with renderText and display compatibility. Upgrading to the latest stable release should resolve any lingering edge cases.

内容的提问来源于stack exchange，提问作者sabertenn