0
217
VistasReaccionar: porcentaje máximo de número formateado
Tengo un componente personalizado que muestra un valor porcentual.
Quiero restringir esto a max. 10 %, mi utilería personalizada tiene este valor como "Tarifa".
¿Cómo puedo conseguir esto?
FormattedNumber no tiene propiedades para esto.
Componente personalizado SetSupplements
<Col span={4}> <SetSupplementsRate rateName="CapitalisationRate" buttonLabel={t( 'reservationcalculator.reservecalculation.addendum.treatmentcosts.capitalization' )} modalTitle={t( 'reservationcalculator.reservecalculation.capitalization.selectcapitalization' )} rate={CapitalisationRate} /> </Col>componente real
<div data-testid="SetSupplementsRateComponent"> {!!buttonLabel && <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>¡No quiero modificar el componente real porque solo quiero restringir un campo!
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
¿Ha intentado pasar condicionalmente un valor prop.
el código debería ser algo como esto
<FormattedNumber value={rate < 10 ? rate : 10} minDecimals={1} percentage />Solución alternativa: ajustes menores al componente 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 && 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> ); }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta