Блог

У меня есть пользовательский компонент, который отображает процентное значение.

Я хочу ограничить это максимум 10 %, моя пользовательская поддержка имеет такое значение, как «Ставка».

Как я могу этого достичь?

FormattedNumber не имеет для этого свойства.

Настраиваемый компонент SetSupplements

   <Col span={4}>
                    <SetSupplementsRate
                      rateName="CapitalisationRate"
                      buttonLabel={t(
                        'reservationcalculator.reservecalculation.addendum.treatmentcosts.capitalization'
                      )}
                      modalTitle={t(
                        'reservationcalculator.reservecalculation.capitalization.selectcapitalization'
                      )}
                      rate={CapitalisationRate}
                    />
                  </Col>
 

фактический компонент

 <div data-testid="SetSupplementsRateComponent">
      {!!buttonLabel amp;amp; <div className="strong">{`${buttonLabel}:`}</div>}

      <Button
        className="SetSupplementsRateButton"
        onClick={() => setModalVisible(true)}
        data-testid="SetSupplementsRateButton"
        disabled={loading}
      >
        <FormattedNumber value={rate} minDecimals={1} percentage />
      </Button>

      <Modal
        visible={modalVisible}
        footer={null}
        onCancel={() => setModalVisible(false)}
        title={modalTitle}
      >
        <SetSupplementsRateForm
          rateName={rateName}
          initialValues={{ Rate: rate }}
          onSubmit={onSubmit}
        />
      </Modal>
    </div>
 

Я не хочу изменять фактический компонент, потому что я хочу ограничить только одно поле!

Вы пытались условно передать значение реквизита.

код должен выглядеть примерно так

 <FormattedNumber value={rate < 10 ? rate : 10} minDecimals={1} percentage />
 

Альтернативное решение — незначительные изменения в компоненте FormattedNumber

 import React, { useState, useEffect } from 'react';
import './style.css';

const FormattedNumber = ({ rate, isRestricted }) => {
  const [value, setValue] = useState(rate);
  useEffect(() => {
    if (isRestricted) {
      if (rate < 10) {
        setValue(rate);
      }
    }
  }, []);

  const handleChange = (e) => {
    if (e.target.value < 10 amp;amp; isRestricted) {
      setValue(e);
    }
  };
  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
    </div>
  );
};

const rate = 12;

export default function App() {
  return (
    <div>
      <FormattedNumber rate={rate < 10 ? rate : 10} isRestricted /> // values less than 10
     <FormattedNumber rate={rate < 10 ? rate : 10} /> // can take any value
    </div>
  );
}