我在无线电输入方面遇到了一个奇怪的问题。我在 Next 15 (React 19) 中形成了受控状态。我遇到的问题是,当我提交表单时,选中的无线电输入突然显示为未选中。但 React 状态显示它仍在检查中。
我看到React 19表单在提交时会自动清除,所以我从不受控制的状态变成了受控制的状态。因为如果操作返回任何验证错误,我不想清除表单。这符合我对文本输入的预期。
步骤:
formValues.searchType = 1
"use client"
...
const defaultState = {
errors: [],
fieldValues: {
searchType: "",
}
};
export default function SomeForm() {
const [actionState, formAction, isPending] = useActionState(importedAction, defaultState);
const [formValues, setFormValues] = useState(defaultState.fieldValues);
console.log(formValues.searchType);
const handleRadioOption = (e: ChangeEvent<HTMLInputElement>) => {
setFormValues({
...defaultState.fieldValues,
searchType: e.currentTarget.value
});
}
return (
<Form action={formAction}>
<fieldset>
<legend>Select an option</legend>
<input
type="radio"
id="option1-radio"
label="Search by 1"
aria-controls="conditional-1"
name="searchType"
value="1"
onChange={handleRadioOption}
checked={formValues.searchType === "1"}
/>
{formValues.searchType === "1" && <div id="conditional-1">conditional section 1</div>}
<input
type="radio"
id="option2-radio"
label="Search by 2"
aria-controls="conditional-2"
name="searchType"
value="2"
onChange={handleRadioOption}
checked={formValues.searchType === "2"}
/>
{formValues.searchType === "2" && <div id="conditional-2">conditional section 2 </div>}
</fieldset>
<button disabled={isPending}>Continue</Button>
</Form>
);
}
我希望无线电输入根据
checked
属性呈现为选中或未选中,但在提交表单后它总是显示为未选中。
我尝试过使用
defaultValue
不受控制的状态,但我还需要控制条件部分的渲染,所以这不是一个选项。
我尝试了普通的
<form/>
元素以及 Next <Form/>
但都有这个问题
在此处添加了显示问题的代码和框: https://codesandbox.io/p/devbox/cocky-shannon-forked-8qlwzy?file=%2Fapp%2Fform%2Fcomponent.tsx%3A11%2C15&workspaceId=ws_YJunuyU6avBk8pMTbNjaGv
这是最新版本的 React 19 的一个错误。这里提出了一个问题: https://github.com/facebook/react/issues/31695
我有一个解决方法,即向表单添加一个
onSubmit
处理程序,防止默认行为,并手动调用 useTransaction 内的操作。
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(formRef.current || undefined);
startTransition(() => {
formAction(formData);
});
};