我正在构建一个表单字段验证对象。我正在使用useState来跟踪表单上每个字段中的值以及要验证的字段类型,即电子邮件,文本,密码。我可以使用两个单独的钩子来做到这一点(一个用于值,一个用于状态)。我正在尝试将这些对象放在一起。这是发生问题的地方。
字段名称是每个字段的键。该对象如下所示
fName : {
text: 'John',
colType: 'text'
}
lName : {
text: 'Doe',
colType: 'text'
}
hairColor : {
text: 'Brown'
colType: 'text'
birthDate : {
text: '02/02/2010'
colType: 'date'
如您所见,验证将基于字段的类型。该验证将在表单的onSubmit上进行。该组件将可用于所有表单。由于这个原因,我正在尝试使其通用。
这是我要用于setter函数的内容
setValues({...values,
[name] : {
text : [text],
colType : [colType]
}
});
我在解构这个问题上遇到了问题,该问题用于获取文本和colType以基于colType验证文本。 [name]是要验证的对象的名称。
有什么想法吗?
答案 0 :(得分:0)
您正确使用了动态键[name]
。但是,您尝试设置一个包含一项的数组,变量text
或colType
(text : [text]
意味着将一个对象的数组设置为父项的text
字段对象)。
它应该是:
setValues({...values,
[name] : {
text : text,
colType : colType
}
});
或:
setValues({...values,
[name] : {
text,
colType
}
});
答案 1 :(得分:0)
在问题中使用以上示例:
要将值放入useState挂钩中:
const [values, setValues] = useState([]);
setValues({...values,
[name] : {
text,
colType
}
});
要从useState挂钩中读取包括键的值:
const entries = Object.entries(values);
entries.forEach (function (arrayItem) {
const {text, colType} = values[arrayItem[0]]; // arrayItem[0] = [name] text = text value colType = colType value for the key which is [name]
... the rest of the code to validate the entries for all of the columns on the form
})
可能有更好/更易理解的方法来提取这些内容,但这可行。如果您有更好的方法,请发布它,我很乐意更新我的方法。感谢PJohnson的帮助