英文:
Input field with default value that is not touched by user is empty string in form data on submit
问题
我正在使用 react-hook-form，并且我使用默认值预填充了几个输入字段。
这里是表单组件的开头，我在其中设置了消息字段的值。
function Form() {
const [msg, setMsg] = useState("");
fetch(message)
.then(r => r.text())
.then(text => {
setMsg(text);
});
const { register, handleSubmit, reset, watch, formState: { errors } } = useForm<Inputs>();
const onSubmit: SubmitHandler<Inputs> = data => {
console.log("submit")
console.log(data)
reset();
};
这是消息输入字段（material UI 组件）
<TextField
id="message"
className='inputfield'
size="small"
label="Message"
{...register("message")}
multiline rows={7}
required
value={msg}/>
当我点击提交按钮时，表单中的这个值为空字符串。
但是，当我点击字段，然后点击提交按钮时，我设置的默认值会出现在表单数据中。
有人能解释为什么会发生这种情况以及如何解决，以便始终发送值，无论用户是否触摸字段。
英文:
I'm using react-hook-form and I prepopulated several input fields with default values
Here is the beginning of the form component where I set the value that goes in the message field.
function Form() {
const [msg, setMsg] = useState("");
fetch(message)
.then(r => r.text())
.then(text => {
setMsg(text);
});
const { register, handleSubmit, reset, watch, formState: { errors } } = useForm<Inputs>();
const onSubmit: SubmitHandler<Inputs> = data => {
console.log("submit")
console.log(data)
reset();
};
Here is the message input field (material UI component)
<TextField
id="message"
className='inputfield'
size="small"
label="Message"
{...register("message")}
multiline rows={7}
required
value={msg}/>
When I click my submit button this value in the form has empty string.
However when I click the field, then hit submit, then the default value I set appears in the form data.
Can someone explain why this is happening and how to get around it so that the value always gets sent regardless if the user touches the field or not.
答案1
得分: 1
问题在于当您首次加载表单时，useForm 不知道输入字段的值，但当您点击该输入字段时，useForm 理解到输入字段中发生了变化。您需要将 API 的值保存到 useForm 中。
function Form() {
const [msg, setMsg] = useState("");
fetch(message)
.then(r => r.text())
.then(text => {
setMsg(text);
});
const { register, handleSubmit, reset, watch, formState: { errors } } = useForm<Inputs>({
values: {
message: msg
}
});
const onSubmit: SubmitHandler<Inputs> = data => {
console.log("submit")
console.log(data)
reset();
};
}
查看 useForm 文档，它们提供了一个很好的示例：
https://react-hook-form.com/api/useform/#values
英文:
The issue is that when you first load in, useForm doesnt know what the value is, but when you click into that input field, useForm understands that something has changed in that input field.
You will need to save the values from the API into useForm
function Form() {
const [msg, setMsg] = useState("");
fetch(message)
.then(r => r.text())
.then(text => {
setMsg(text);
});
const { register, handleSubmit, reset, watch, formState: { errors } } = useForm<Inputs>({
values: {
message: msg
}
});
const onSubmit: SubmitHandler<Inputs> = data => {
console.log("submit")
console.log(data)
reset();
};
check out useForm docs as they do give you a good example
https://react-hook-form.com/api/useform/#values
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论