Hola a todos, tengo el siguiente código :
const BasicInformation = () => { const { Panel } = Collapse; const dataFromBackend = [ { id: 2, depositeAmt: '500' }, { id: 3, depositeAmt: '1500' }, ]; const totalCount = dataFromBackend .map((item) => item.depositeAmt) .reduce((prev, curr) => +prev + +curr, 0); const onSubmit = (data) => { console.log(data); }; return ( <Form onFinish={(e) => onSubmit(e)}> <Form.List name="users" initialValue={dataFromBackend}> {(fields, { add }) => { return ( <> total Deposit Amount: $ {totalCount} <Button onClick={() => { add(); }} block > Add </Button> {fields.map((field, i) => ( <Collapse key={i} accordion > <Panel header="Amount : "> <Form.Item name={[field.name, 'depositeAmt']} label="Amount" fieldKey={[field.fieldKey, 'depositeAmt']} > <Input /> </Form.Item> </Panel> </Collapse> ))} </> ); }} </Form.List> <Button type="primary" htmlType="submit"> send </Button> </Form> ); }; Recibo una fecha de backend dataFromBackend y la reduzco para obtener el recuento de todo el monto del depósito.
También en derrumbes tengo etiqueta de deposit . La idea es que cuando el usuario cambia el valor del campo de depósito, el total Deposit Amount: y <Panel header="Amount : "> también deben cambiar dinámicamente.
Intento esto pero no me ayuda a resolverlo:
<Form.Item name={[field.name, 'depositeAmt']} label="Amount" fieldKey={[field.fieldKey, 'depositeAmt']} > <Input onChange={(e)=>totalCount + e} /> </Form.Item>Por favor ayúdenme a solucionar este problema, muchas gracias.
¡Almacena los datos de dataFromBackend en la variable, ese es el problema! Debe almacenar dataFromBackend en el estado y en el cambio de input (handleInputChange) , ¡necesita actualizar esta matriz!
Al hacer clic en Add btn, debe insertar un nuevo objeto en la matriz dataFromBackend
¡Muestra este código, te ayudará!
const BasicInformation = () => { const { Panel } = Collapse; const [dataFromBackend, setDataFromBackend] = useState([ { id: 2, depositeAmt: '500' }, { id: 3, depositeAmt: '1500' }, ]); const [totalCount, setTotalCount] = useState( dataFromBackend .map((item) => item.depositeAmt) .reduce((prev, curr) => +prev + +curr, 0) ); const onSubmit = (data) => { console.log(data); }; const handleInputChange = (index, value) => { let arr = [...dataFromBackend]; arr[index].depositeAmt = value; setDataFromBackend(arr); }; useEffect(() => { let count = dataFromBackend .map((item) => item.depositeAmt) .reduce((prev, curr) => +prev + +curr, 0); setTotalCount(count); }, [dataFromBackend]); const addNewField = () => { let id = new Date().getTime(); setDataFromBackend(oldArray => [...oldArray, { id: id, depositeAmt: 0 }]); }; return ( <Form onFinish={(e) => onSubmit(e)}> <Form.List name="users" initialValue={dataFromBackend}> {(fields, { add }) => { return ( <> total Deposit Amount: $ {totalCount} <Button type="dashed" onClick={() => { add(); addNewField(); }} block > Add </Button> {fields.map((field, i) => ( <Collapse key={i} accordion style={{ background: 'rgba(25, 103, 210, 0.08)', border: 'none', }} > <Panel style={{ border: 'none' }} header="Amount :"> <Form.Item name={[field.name, 'depositeAmt']} label="Amount" fieldKey={[field.fieldKey, 'depositeAmt']} > <Input type="number" onChange={(e) => handleInputChange(i, e.target.value)} /> </Form.Item> </Panel> </Collapse> ))} </> ); }} </Form.List> <Button type="primary" htmlType="submit"> send </Button> </Form> ); }; ReactDOM.render(<BasicInformation />, document.getElementById('container'));