Всем привет! Мне необходимо сделать таблицу, в которой которой есть инпуты и написать обработчик событий для них. Сейчас из-за того, что атрибут name инпута один для всех, данные собираются только с одного инпута и создается новое поле в объекте данных, мне надо, чтобы менялось конкретное поле в стейт переменной, как это сделать? Спасибо заранее)
У меня следующая структура данных:
const testData = [
{
id: 1,
courier: 'TEST',
data: [
{
date: '01.10',
ordersName: 'Заказы',
orders: 23,
distanceName: 'Дистанция',
distance: 800,
},
{
date: '02.10',
ordersName: 'Заказы',
orders: 13,
distanceName: 'Дистанция',
distance: 120,
}]
Разметка
function Table() {
const [testDataState, setTestDataState] = useState(testData)
const headColumns = Object.values(testData[0])[2];
return (
<div className='table-courier-wrapper'>
<form>
<table className='table_courier'>
<thead>
<tr>
<th className='table-courier__head-fixed' rowSpan='2' colSpan='2'>
Курьер
</th>
{headColumns.map((el) => {
return (
<th key={el} className='table-courier__head' colSpan='2'>
{el.date}
</th>
);
})}
</tr>
<tr>
{headColumns.map((el) => {
return (
<>
<th key={el.ordersName} className='table-courier__head'>
{el.ordersName}
</th>
<th key={el.distanceName} className='table-courier__head'>
{el.distanceName}
</th>
</>
);
})}
</tr>
</thead>
<tbody>
{testData.map((tableData) => {
return (
<tr className='table-courier__row'>
<td className='table-courier__main-fixed' colSpan='2'>
{tableData.courier}
</td>
<ReadOnlyRow
tableData={tableData}
handleEditFormChange={handleEditFormChange}
/>
</tr>
);
})}
</tbody>
</table>
</form>
</div>
);
}
Компонент ReadOnlyRow, в котором содержатся строки таблицы с данными:
function ReadOnlyRow({ tableData, handleEditFormChange }) {
const [isClicked, setIsClicked] = useState(false);
const handleCellClick = () => {
setIsClicked(!isClicked);
};
return (
<>
{tableData.data.map((el) => {
return (
<>
<td className='table-courier__main'>{el.orders}</td>
{isClicked ? (
<td className='table-courier__main'>
<input
className='table-courier__input'
type='text'
name='distance'
defaultValue={el.distance}
onChange = {handleEditFormChange}
/>
</td>
) : (
<td className='table-courier__main' onClick={handleCellClick}>
{el.distance}
</td>
)}
</>
);
})}
</>
);
};
Функция обработчик инпута:
const handleEditFormChange = (e) => {
const { name, value } = e.target;
setTestDataState({
...testDataState,
[name]: value,
});