Как работать с инпутами, которые мапятся
Есть такой компонент, который мэпит объект.
function Tbody({goods}) {
const [amount, setAmount] = useState("")
const [id, setId] = useState("")
const handleAmount = (e) => {
setAmount(e.target.value)
}
const handleId = (id) => {
setId(id)
}
return (
<tbody>
{goods.map(item => {
return (
<tr>
<td>{item.gid}</td>
<td>{item.gname}</td>
<td>{item.gprice}</td>
<td><input type={"text"} name={item.gname} onChange={handleAmount}/></td>
<td></td>
</tr>
)
})}
</tbody>
);
}
Передал стейт amount в пустой td, но он передается и в остальные инпуты, что логично, ведь у меня он мепится. Как мне указать, что я пишу в этот инпут + чтобы при вводе в другой инпут, предыдущий стейт не исчезал
Ответы (1 шт):
Автор решения: Aleksey D
→ Ссылка
На данный момент состояние amount является общим для таблицы. Как вариант сделать отдельный компонент TableRow где на каждую строку будет свое состояние, и там же прокидуется ивент.
