Редактирование поля ввода среди многих в React

проверьте этот код, пожалуйста https://stackblitz.com/edit/react-koqfzp?file=src/Section.js

Каждый раз, когда я добавляю элемент, я также добавляю случайное число, которое хочу изменить. Число отображается в компоненте текстового поля MUI.

<TextField
            type="number"
            variant="standard"
            aria-readonly={edit === true ? false : true}
            value={edit === true ? value : numbers[i]}
            onChange={(e) => setValue(e.target.value)}
          />

И кнопки отображаются на основе состояния редактирования, например:

{edit === true ? (
            <button onClick={() => saveEdit(i)}>Save</button>
          ) : (
            <button onClick={() => setEdit(true)}>Edit</button>
          )}

И это работает, я могу редактировать его и перерисовывать с новым значением, проблема в том, что когда я нажимаю кнопку редактирования, каждое поле получает новое входное значение, и кнопка сохранения появляется в каждом поле, хотя, когда я сохраняю его, он возвращается к исходному значению. Как я могу делать то, что делаю, но только в одном конкретном поле?

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
2
0
44
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Проблема в том, что вы используете setEdit как логическое значение.

Вы можете определить его как индекс массива для редактирования с -1 в качестве начального значения.

const [edit, setEdit] = useState(-1)
...

{edit === i ? (
            <button onClick={() => saveEdit(i)}>Save</button>
          ) : (
            <button onClick={() => setEdit(i)}>Edit</button>
          )}

Я рекомендую создать еще один компонент Пример: Элемент с ним имеет свои собственные состояния редактирования, состояния значений И передайте ему необходимые реквизиты: значение, числа, saveEdit (index, newValue), removeItem (index), а также индекс

saveEdit необходимо изменить в разделе, передав индекс и новое значение

Я надеюсь, что это ясно для вас

добавьте значения карты в компонент и добавьте состояния внутри компонента, чтобы у вас было несколько состояний для каждого компонента, а не только 1

родительский компонент

{section.items.map((item, i) => (
     <Component key={i} item={item}/>
)}

дочерний компонент

const Component = ({ section, addItem, removeItem}) => {
   const [newItem, setNewItem] = useState('');
   const [edit, setEdit] = useState(false);
   const [value, setValue] = useState(0);
   const [numbers, setNumbers] = useState(section.number);

   const handleChange = (e) => {
        setNewItem(e.target.value);
   };

   return (
      <TextField
        type="number"
        variant="standard"
        aria-readonly={edit === true ? false : true}
        value={edit === true ? value : numbers[i]}
        onChange={(e) => setValue(e.target.value)}
      />
   )

Таким образом, каждый элемент section.items будет отдельным компонентом?

José Carlos 22.04.2022 21:14

да, поэтому у них будут свои собственные состояния для сохранения значений, поэтому они не будут бороться за состояния, какой элемент сохраняет свое значение в каком состоянии... если вы понимаете, что я имею в виду :)) как переменная const может содержать 1 значение, useState также содержит 1 значение, но, добавив его в циклический компонент, вы можете использовать, например: const array = 0 столько раз, сколько они находятся в отдельных компонентах.

c0dm1tu 22.04.2022 21:23

Другие вопросы по теме