json - 使用嵌套 json 和受控组件反应表单
问题描述
我正在构建一个带有可重用组件的反应表单。
我想更新我的 json 以便我可以嵌套一些数据,但是我遇到了一个“受控与不受控”的错误(再次!),我无法解决。我一直在研究它,但我可能缺乏正确的词汇来提高效率。我应该在哪里或如何定义“宠物”..?
后来,我的目标是能够为一个主人添加几只宠物。
宠物表格
import React, { useState, useEffect } from 'react';
import Controls from './reusables/Controls';
import { useForm, Form } from './reusables/useForm';
const initialFieldValues = {
id: 0,
owner: '',
pet : [{
petName: '',
petBreed: ''
}]
}
export default function PetsForm(props) {
const {
values,
setValues,
errors,
setErrors,
handleInputChange,
resetForm
} = useForm(initialFieldValues, true, validate);
return (
<Paper>
<Box>
<Controls.Input
label="Owner"
name='owner'
placeholder="Owner"
value={values.owner = values.owner.toUpperCase()}
onChange={handleInputChange}
/>
<Controls.Input
label="PetName"
name='petName'
placeholder="Pet Name"
value={values.petName = values.petName.toUpperCase()}
onChange={handleInputChange}
/>
<Controls.Input
label="PetBreed"
name='petBreed'
placeholder="Pet Breed"
value={values.petBreed}
onChange={handleInputChange}
/>
</Box>
</Paper>
etc...
}
我的 useForm
export function useForm(initialFieldValues, validateOnChange=false, validate) {
const [values, setValues] = useState(initialFieldValues);
const [errors, setErrors] = useState({});
const handleInputChange = event => {
const { name, value } = event.target
setValues({
...values,
[name]: value,
})
if(validateOnChange)
validate({
[name]: value,
})
}
return {
values,
setValues,
errors,
setErrors,
handleInputChange,
};
}
解决方案
您收到错误是因为您的价值观values.petName
和values.petBreed
是undefined
。因为你的价值观是
const initialFieldValues = {
id: 0,
owner: '',
pet : [{
petName: '',
petBreed: ''
}]
}
所以petname
andpetBreed
必须被称为values.pet.[0].petName
and values.pet.[0].petBreed
。
设置嵌套对象的值
您可以使用 lodash set设置深度嵌套对象的值。您需要做的就是提供name
虚线路径值。对于 petname,您需要将name
属性提供为pet.[0].petName
现在我们可以使用 lodash set 设置你的值对象的值,
const handleInputChange = event => {
const { name, value } = event.target
// clone the values . you can use lodash cloneDeep for this
set(clonedValues, name, value);
setValues(clonedValues);
....
}
现在您可以检索深度嵌套的值
<Controls.Input
label="PetBreed"
name='pet.[0].petBreed'
placeholder="Pet Breed"
value={values.pet.[0].petBreed}
onChange={handleInputChange}
/>
推荐阅读
- java - 在 GWT 应用程序上创建 @UiTemplate
- node.js - Nodejs Elastic benastalk拒绝连接到上游/上游过早关闭
- c - 只打印第一行(文件 i/o)
- python - 为什么 Python 不能识别 Beautifulsoup
- javascript - 在 App.js 文件中为 React 应用添加 Footer 和 Navigation,包括 React 路由?
- php - 使用 aws-php-sdk 将值附加到 DynamoDB 编号集
- ios - Swift/Combine - 将过滤后的对象分配给类的属性
- python-3.x - 对于给定的两个序列,我在编写程序以组合两个序列并按字母顺序排列时遇到输入错误?
- python-3.x - 多行字符串python3之间的输入
- python-3.x - zipfile :仅压缩目录中存在的文件