javascript - 更新由 REACTJS 中的数组映射呈现的输入标签

Question

希望你们一切都好。

我有下一个代码用于动态显示每个选定产品的数量

import React, { useState, useEffect } from 'react';
import db from '../firebase';
//const Swal = window.Swal;

const NewSale = () => {

const [products, setProducts] = useState([]);
const [selectedProducts, setSelectedProducts] = useState([]);

useEffect(() => {

    if(products.length === 0){
        db.collection('products').get().then((querySnapshot) => {
            const docs = [];
            querySnapshot.forEach((doc) => {

                docs.push({
                    id: doc.id,
                    ...doc.data()
                });

            });

            docs.sort((a, b)=> a.name.localeCompare(b.name));

            setProducts(docs);
        });
    }
});

const handleSelectChange = (e) => {

    const value = e.target.value;

    if(value){

        const selectedProduct = products.filter(item => item.id === value)[0];

        setSelectedProducts(selectedProducts => [...selectedProducts, {
            id: value,
            name: selectedProduct.name,
            quantity: 1
        }]);
    }
    
}

const handleRangeChange = (target, index) => {

    const currentValue = parseInt(target.value);

    let currentArrayValue = selectedProducts;

    currentArrayValue[index].quantity = currentValue;

    setSelectedProducts(currentArrayValue);
}

const handleCancelButton = () => {
    setSelectedProducts([]);
}

return (
    <React.Fragment>
        <div className='container'>
            <h1 className='display-3 text-center'>New Sale</h1>
            <div className='row'>
                <div className='col'>
                    <div className='mb-3'>
                        <label htmlFor='product' className='form-label fs-3'>Service</label>
                        <select id='product' onChange={handleSelectChange} className='form-select form-select-lg' multiple aria-label='multiple select service'>
                            {products.length !== 0?
                                products.map(item => <option key={item.id} value={item.id}>{item.name}</option>) : <option>No product registered</option>
                            }
                        </select>
                    </div>
                </div>
            </div>
            <div className='row mt-4'>
                <div className='col'>
                    <table className='table caption-top'>
                        <caption>Sell List</caption>
                        <thead>
                            <tr>
                                <th scope='col'>#</th>
                                <th scope='col'>Product</th>
                                <th scope='col'>Quantity</th>
                            </tr>
                        </thead>
                        <tbody>
                            {selectedProducts.length !== 0?
                                selectedProducts.map((item, index) => (
                                    <tr key={index}>
                                        <th scope='row'>{(index + 1)}</th>
                                        <td>{item.name}</td>
                                        <td>
                                            <label htmlFor={`customRange-${index}`} className='form-label'>{item.quantity} Units</label>
                                            <input
                                                type='range'
                                                className='form-range'
                                                value={item.quantity}
                                                onChange={({target}) => handleRangeChange(target, index)}
                                                min='1'
                                                max='100'
                                                step='1'
                                                id={`customRange-${index}`}/>
                                        </td>
                                    </tr>
                                )) :
                                <tr>
                                    <th className='text-center' colSpan='3'>Nothing selected!</th>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
            <div className='row mt-2'>
                <div className='col'>
                    <button className='btn btn-success'>Save</button>
                </div>
                <div className='col'>
                    <button className='btn btn-warning' onClick={handleCancelButton}>Cancel</button>
                </div>
            </div>
        </div>
    </React.Fragment>
)
};

export default NewSale;

代码显示了这一点......我不知道是否允许我执行此类操作，因为我每次选择产品时都会添加事件，所以我不确定这是不是最好的方法。

问题是我得到了这个意想不到的结果，

我想要做的是显示每个选定项目的当前数量，

谢谢！！

标签： javascriptarraysreactjs