如何在反应中动态添加 table 行？

Question

我目前正在使用 React 制作一个税收计算器应用程序，我想根据用户从输入类型范围中选择的持续时间向 table 添加多行。每行将显示还款日期以及根据用户希望获得的贷款金额和利率计算出的相应值。我目前正在使用 bootstrap v5 和 React。

我的想法是，当持续时间由用户设置时，我创建一个函数来生成日期数组并将其映射。但是，我担心的是，如果用户随后更改持续时间，table 是否会根据更改添加或删除行？

Answer 1

您可以使用 useEffect 挂钩在用户每次更改持续时间值时创建一个日期数组。然后你可以简单地映射通过这个数组来显示所需的行数。

这意味着您不需要设置“今天”日期，因为它将在这个 useEffect 挂钩中设置，该挂钩也在第一次渲染之前运行。

最终代码应如下所示：

import React, { useState, useEffect } from "react";

function App() {
    const [loan, setLoan] = useState(1000);
    const [duration, setDuration] = useState(1);
    const [interest, setInterest] = useState(0);
    const [dates, setDates] = useState([]);

    const getInterest = () => {
        let interestedAmount = (loan * interest) / 100;
        interestedAmount /= duration;
        return Math.round((interestedAmount + Number.EPSILON) * 100) / 100;
    };

    const getPrincipal = () => {
        let dividedAmount = loan / duration;
        return Math.round((dividedAmount + Number.EPSILON) * 100) / 100;
    };

    const getTotalRepayment = () => {
        return getInterest() + getPrincipal();
    };

    useEffect(() => {
        let datesArray = [];

        for (let i = 0; i < duration; i++) {
            let date = new Date();
            date = new Date(date.setMonth(date.getMonth() + i));
            datesArray.push(
                date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear()
            );
        }

        setDates(datesArray);
    }, [duration]);

    return (
        <React.Fragment>
            <header>
                <h1>Your Loan</h1>
            </header>
            <main>
                <form>
                    <div className='row g-3 align-items-center'>
                        <div className='col-auto'>
                            <label htmlFor='loan-input' className='form-label'>
                                Loan Amount (£) : {loan}
                            </label>
                        </div>
                        <div className='col-auto'>
                            <input
                                type='range'
                                value={loan}
                                min='1000'
                                max='200000'
                                step='1000'
                                className='form-range'
                                id='loan-input'
                                onChange={(e) => setLoan(e.target.value)}
                            />
                        </div>
                    </div>
                    <div className='row g-3 align-items-center'>
                        <div className='col-auto'>
                            <label htmlFor='duration-input' className='form-label'>
                                Duration (in Months) : {duration}
                            </label>
                        </div>
                        <div className='col-auto'>
                            <input
                                type='range'
                                value={duration}
                                min='1'
                                max='60'
                                step='1'
                                className='form-range'
                                id='duration-input'
                                onChange={(e) => setDuration(e.target.value)}
                            />
                        </div>
                    </div>
                </form>
                <div className='row g-3 align-items-center'>
                    <div className='col-auto'>
                        <label htmlFor='interest-range' className='form-label'>
                            Interest Rate (%) : {interest}
                        </label>
                    </div>
                    <div className='col-auto'>
                        <input
                            type='range'
                            value={interest}
                            min='0'
                            max='10'
                            step='1'
                            className='form-range'
                            id='interest-range'
                            onChange={(e) => setInterest(e.target.value)}
                        />
                    </div>
                    <table className='table'>
                        <thead>
                            <tr>
                                <th scope='col'>Repayment Date</th>
                                <th scope='col'>Principal</th>
                                <th scope='col'>Interest</th>
                                <th scope='col'>Total Repayment</th>
                            </tr>
                        </thead>
                        <tbody>
                            {dates.map((date, index) => (
                                <tr key={index}>
                                    <td>{date}</td>
                                    <td>{getPrincipal()}</td>
                                    <td>{getInterest()}</td>
                                    <td>{getTotalRepayment()}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </main>
        </React.Fragment>
    );
}

export default App;

如何在反应中动态添加 table 行？

How do I add table row dynamically in react?

javascript

reactjs

html-table

rendering

react-bootstrap