@mrrangerr

Как обработать список инпутов?

Всем привет, у меня есть массив объектов, внутри объектов есть еще один массив объектов, на основе этого массива вывожу список инпутов. Теперь как мне сделать обработчики события для каждого инпута чтобы на бэк отправить в таком же виде какими они мне прилетели, только с новыми значениями

const renderAllConditionsProperties = () => {
        return conditions && conditions.map((a: any) => {
            return a.conditionProperties.map((item: any) => {
                return (
                    <div>
                        <span>{item.propertyDescription}: </span>
                        <Input
                            style={{
                                border: '1px solid #0079E9',
                                width: '10%',
                                boxSizing: 'border-box',
                                height: '33px',
                                borderRadius: '10px',
                                marginTop: '50px'
                            }}
                            key={item.conditionProperyId}
                            value={item.propertyValue}
                            // onChange={(e) => setTest((prevState) => prevState.find((c) => c[propertyName] === item.propertyName))}
                        />
                    </div>
                )
            })
        })
    }


Вот модель данных
"conditions": [
{
"conditionId": 0,
"conditionName": "string",
"conditionDescription": "string",
"conditionProperties": [
{
"conditionPropertyId": 0,
"propertyName": "string",
"propertyDescription": "string",
"propertyValue": "string",
"propertyElementType": "string"
}
]
}
],
  • Вопрос задан
  • 123 просмотра
Решения вопроса 1
Born2Lose
@Born2Lose
Frontend developer
Можете воспользоваться библиоткеой Immer
пример

!!!очень плохо так делать, но вам важен порядок, поэтому нормализовать "нельзя"
onChange={(e) =>
            setTest(
              produce((draft) => {
                draft.conditions.forEach((c) =>
                  c.conditionProperties.forEach((prop) => {
                    if (prop.propertyName === item.propertyName) {
                        prop.propertyValue = e.target.value;
                    }
                  })
                );
              })
            )
          }


P.S Советую почитать про нормализацию данных
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы