Блог

Главная - Вопросы по программированию - При изменении входного значения в режиме использования карты реагирует на перехваты

При изменении входного значения в режиме использования карты реагирует на перехваты

#reactjs #forms #input #react-hooks #setstate

#reactjs #формы #ввод #реагировать-перехваты #setstate

Вопрос:

У меня проблема с входными значениями useState.

Что я получил:

 const [document, setDocument] = useState([
 {
    documentName: '',
    documentDate: '',
    documentInfo: '',
    documentContent: ''
  },
  {
    documentName: '',
    documentDate: '',
    documentInfo: '',
    documentContent: ''
  }
])


return ({
    document.map((item, index) => {
    return (
      <>
        <Grid item xs={3}>
          <label>Typ dokumentu:</label>
          <SelectInput
            fullwidth
            onChange={(e) =>
              setDocument({
                ...document,
                [e.target.name]: document.map((value, j) => {
                  if (index === j) value = e.target.value;
                  return value;
                }),
              })
            }
            value={document.documentName}
            name="documentName"
            register={register}
          />
        </Grid>
        <Grid item xs={1}>
          <label>Sekcja:</label>
          <SelectInput
            fullwidth
            onChange={(e) =>
              setDocument({
                ...document,
                [e.target.name]: document.map((value, j) => {
                  if (index === j) value = e.target.value;
                  return value;
                }),
              })
            }
            value={document.documentDate}
            name="documentDate"
            register={register}
          />
        </Grid>
        <Grid item xs={1}>
          <label>Strefa:</label>
          <SelectInput
            fullwidth
            onChange={(e) =>
              setDocument({
                ...document,
                [e.target.name]: document.map((value, j) => {
                  if (index === j) value = e.target.value;
                  return value;
                }),
              })
            }
            value={document.documentInfo}
            name="documentInfo"
          />
        </Grid>
        <Grid item xs={1}>
          <label>SRS:</label>
          <SelectInput
            fullwidth
            onChange={(e) =>
              setDocument({
                ...document,
                [e.target.name]: document.map((value, j) => {
                  if (index === j) value = e.target.value;
                  return value;
                }),
              })
            }
            value={document.documentContent}
            name="documentContent"
          />
        </Grid>
      </>
    );
  });
}
)

Чего я хочу? Когда я меняю, например, DocumentName во втором документе, тогда я получаю:

 [
{
 documentName:'',
 documentDate:'',
 documentInfo:'',
 documentContent:''
},
{
 documentName:'DOCUMENTEXAMPLENAME',
 documentDate:'',
 documentInfo:'',
 documentContent:''
}
]

Я не могу создать функцию onChange, в которой я устанавливаю эти данные так, как я описал выше.

Я пытаюсь использовать метод handleChange, где:

   const handleChange = (e,index) => {
        const items = [...document]
        items[index][e.target.name] = e.target.value
        setDocument(items)
    }

Но затем это изменяет правильное значение, но в каждом объекте.

Пожалуйста, помогите мне!!

Комментарии:

1. в случае функции handleChange scenerio , как вы передаете значения в функцию handlechange

2. Я вызываю это в функции onChange внутри компонентов ввода onChange {handleChange}

Ответ №1:

Написал свой код здесь

Теперь я вижу, что вы изменили свой вопрос, предоставив ту же функцию, что и я, но в песочнице она работает хорошо. Может быть, в вашем исходном коде есть что-то еще?