Как установить объекты в качестве значений формы в реакции с пользовательским интерфейсом материала?
В настоящее время я пытаюсь создать форму с пользовательским интерфейсом React и Material, где моя конечная полезная нагрузка должна выглядеть так:
{
title: title,
quadrants: {
0: { name: quadrantOne },
1: { name: quadrantTwo },
2: { name: quadrantThree },
3: { name: quadrantFour }
}
}
Соответствующая часть моей формы (включая начальные значения) устроена следующим образом:
const initialValues = {
title: '',
quadrants: {},
};
const [values, setValues] = useState(initialValues);
const handleInputChange = (e: any) => {
const { name, value } = e.target;
setValues({
...values,
[name]: value
});
};
return (
<Form>
<Grid item xs = {12} sm = {12}>
<Input
name = "title"
label = "Title"
value = {initialValues.title}
onChange = {handleInputChange}
/>
</Grid>
<Grid item xs = {12} sm = {6}>
<Input
name = "quadrant-one"
label = "Quadrant 1"
value = {initialValues.quadrants}
onChange = {handleInputChange}
/>
</Grid>
<Grid item xs = {12} sm = {6}>
<Input
name = "quadrant-two"
label = "Quadrant 2"
value = {initialValues.quadrants}
onChange = {handleInputChange}
/>
</Grid>
</Form>
)
Таким образом, мои поля ввода выглядят так, так что я не могу ничего вводить в поля:
Но если я что-то ввожу в поля (запись не видна), то получаю следующую полезную нагрузку:
{
title: "Test"
quadrants: {}
quadrant-one: "[object Object]"
quadrant-two: "[object Object]"
}
Записи не вложены в объект «квадранты», но записи появляются в полезной нагрузке с именем соответствующего элемента формы (например, квадрант-один, квадрант-два...).
Что я делаю неправильно здесь и как я могу это исправить?
Я знаю, что передавать объект неправильно. Самое смешное, что свойство quadrants — это объект, а не массив. Поэтому я не могу использовать {initialValues.quadrants[0].name}..
Да, вы можете использовать initialValues.quadrants[0], попробуйте.
@lissettdm Говорит: «Ошибка типа: невозможно прочитать имя свойства неопределенного», когда я использую values.quadrants[0].name. Нужно ли менять структуру квадрантов: {} внутри initialValues?
Ответы 2
Попробуйте эти исправления: -
изменить
inputvalueсvalue = {initialValues.title}наvalue = {values.title}. Поскольку вы уже установилиinitialValuesнаstatevalues. СобытиеonChangeбудет отражено только при обновленииstatevaluesс помощьюsetValues. Не непосредственно наconst initialValues(сделайте то же самое для остальных входов — только те входы, которые используютvaluesstate)functionкhandleTitleChange()
const handleTitleChange = (e: any) => {
const { name, value } = e.target;
setValues({
...values,
[name]: value
});
};
functionкhandleQuadrantChange()
const handleQuadrantChange = (e: any) => {
const { name, value } = e.target;
setValues({
...values,
quadrants: {
...values.quadrants,
[name]: value
}
});
};
Хорошо, но вопрос был связан не с использованием initialState, а с установкой значений объекта внутри квадрантов объекта: {}.
Я просто обновляю свой ответ выше. Попробуй
Собственно, именно этого я и хотел избежать. Функции точно такие же, поэтому они фактически повторяются. Кроме того, это не решает мою проблему. Таким образом, я не могу вкладывать другие объекты в квадранты: объект {}, как описано в моем вопросе. Проверьте мою необходимую окончательную полезную нагрузку вверху.
Вы получаете [Object Object], потому что initialValues.quadrants является объектом, я предполагаю, что вы пытаетесь установить initialValues.quadrants[0].name, но поскольку начальное значение initialValues.quadrants[0] не определено
Вам нужно применить некоторые изменения. Я рекомендую вам определить пользовательский атрибут (индекс данных) для ввода квадрантов, таким образом, при изменении ввода вы можете обновить правильный объект. Также для ввода квадрантов вы можете определить функцию для получения значения, потому что при первом рендеринге значение не определено:
const initialValues = {
title: "",
quadrants: {}
};
const [values, setValues] = useState(initialValues);
const handleInputChange = e => {
const { name, value } = e.target;
const dataIndex = Number(e.target.getAttribute("data-index"));
setValues(prev => {
if (name === "title") {
return {
...prev,
[name]: value
};
} else {
return {
...prev,
quadrants: {
...prev.quadrants,
[dataIndex]: { name: value }
}
};
}
});
};
const getValue = prop => {
const value = values.quadrants[prop] ? values.quadrants[prop].name : "";
return value;
};
return (
<Form>
<Grid item xs = {12} sm = {12}>
<Input
name = "title"
label = "Title"
value = {values.title}
onChange = {handleInputChange}
/>
</Grid>
<Grid item xs = {12} sm = {6}>
<Input
name = "quadrant-one"
label = "Quadrant 1"
data-index = "0"
value = {getValue(0)}
onChange = {handleInputChange}
/>
</Grid>
<Grid item xs = {12} sm = {6}>
<Input
name = "quadrant-two"
label = "Quadrant 2"
data-index = "1"
value = {getValue(1)}
onChange = {handleInputChange}
/>
</Grid>
</Form>
)
Работает! Спасибо. Может быть, я создам собственный changeHandler для своих квадрантов, чтобы я мог удалить if внутри setValues.
Да, я думаю, что гораздо чище разделить функцию handleInputChange
Вы передаете и возражаете как значение --> value = {initialValues.quadrants}, возможно, должно быть value = {initialValues.quadrants[0].name}