#javascript #reactjs #ecmascript-6 #react-hooks
#javascript #reactjs #ecmascript-6 #реагирующие хуки
Вопрос:
Я пытаюсь вернуть несколько текстовых входных данных на основе данных в приведенном ниже состоянии (placementData), а затем обработать обновление их соответствующего состояния с помощью одного обработчика onChange.
Я могу с комфортом сопоставлять и возвращать входные данные и их заполнители, значения и т.д., Но я застрял в том, как выполнить onChange.
Я действительно не хочу обновлять каждый из них отдельно/
const [placementData, setPlacementData] = useState([
{ key: 1, position: 'Long side panel', value: 10 },
{ key: 2, position: 'Custom wrap', value: 0 },
{ key: 3, position: 'Seatback', value: 0 },
{ key: 4, position: 'Full wrap', value: 20 },
{ key: 5, position: 'Driver’s cabin', value: 0 },
{ key: 6, position: 'Stop side panel', value: 0 },
{ key: 7, position: 'Max Parade', value: 60 },
{ key: 8, position: 'Parade', value: 0 },
{ key: 9, position: 'Full rear', value: 70 },
{ key: 10, position: 'Rear panel', value: 0 },
]);
Это мое текущее сломанное решение:
const handleInputChange = (e, index) => {
const { name, value } = e.target;
const list = [...placementData];
list[index][name] = value;
setPlacementData(list);
};
return (
<div>
<h4>Add Campaign Placements</h4>
<Row>
{placementData.map((key, i) => (
<Col xs={6} md={6} lg={3} key={key.position}>
<TextField
label={key.position}
name={key.position}
value={key.value}
// defaultValue={selected[0].company}
variant="outlined"
// onChange={handleInputChange}
onChange={(e) => handleInputChange(e, key, i)}
InputProps={
{
// readOnly: isReadOnly,
}
}
/>
</Col>
))}
</Row>
</div>
Я также пытался:
// const handleInputChange = (event) => {
// const { value } = event.target;
// setPlacementData({
// ...placementData,
// [event.target.name]: value,
// });
// };
и
const handleInputChange = (event, idx) => {
setPlacementData(() => placementData.map((item, i) => i.value));
};
Кто-нибудь знает, как я могу это выполнить?
Комментарии:
1. В чем ошибка?
Ответ №1:
handleInputChange(e, key, i)
это то, как вы вызываете свой обработчик, но подпись вашего обработчика является (e, index)
. Итак, вы передаете ключ туда, где вы должны передавать индекс.
Обновите свой обработчик до этого, и я думаю, у вас все должно получиться.
const handleInputChange = (e, index) => {
const { name, value } = e.target;
const list = [...placementData];
// it's an array element, not a keyed map/object,
// so have to recreate the entire element
list[index] = { ...list[index], value };
setPlacementData(list);
};