React 19 单选按钮错误 - 即使选中了受控状态,表单提交后仍显示为未选中状态

问题描述 投票:0回答:1

我在无线电输入方面遇到了一个奇怪的问题。我在 Next 15 (React 19) 中形成了受控状态。我遇到的问题是,当我提交表单时,选中的无线电输入突然显示为未选中。但 React 状态显示它仍在检查中。

我看到React 19表单在提交时会自动清除,所以我从不受控制的状态变成了受控制的状态。因为如果操作返回任何验证错误,我不想清除表单。这符合我对文本输入的预期。

步骤:

  1. 查看广播 1
  2. 点击提交按钮
  3. 操作返回有错误的状态
  4. Radio 1 在渲染中未选中
  5. console.log 仍然显示
    formValues.searchType = 1
  6. 条件部分 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

reactjs forms next.js radio-button react-19
1个回答
0
投票

这是最新版本的 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);
        });
    };
© www.soinside.com 2019 - 2024. All rights reserved.