React 19中表单提交时复选框输入重置但文本输入值保留的原因咨询

嗨，这个问题其实和React 19新推出的表单action prop的处理逻辑有关，我来给你一步步拆解清楚：

首先先看你提供的示例代码：

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client'

function App() {
  const [value, setValue] = useState('')
  const [checked, setChecked] = useState(false)

  return <form action={() => {}}>
    <input type="text" value={value} onChange={({ target }) => setValue(target.value)} />
    <input type="checkbox" checked={checked} onChange={({ target }) => setChecked(target.checked)} />
    <button>Submit</button>
  </form>
}

createRoot(document.getElementById('root')).render(<App />)

按照你说的复现步骤：

• 在文本输入框中输入内容
• 勾选复选框
• 点击“Submit”按钮

确实会出现文本输入框保留内容，但复选框被自动取消勾选的情况，而且没有任何网络请求发出。

背后的原因 #

在React 19中，当你给表单的action prop传入一个回调函数时，React会启用全新的客户端表单提交处理逻辑。这里的关键细节是：React默认会在表单提交完成后执行表单重置操作，但这个操作对不同类型的受控输入组件表现不一致：

• 对于文本输入这类“值型”受控组件，因为你的状态value没有被action回调修改，React会保留当前的状态值，所以输入框内容不会变化；
• 对于复选框这类“开关型”受控组件，React的表单重置逻辑会强制将其checked状态重置为组件初始化时的初始值（也就是你useState(false)设置的默认值），哪怕你的checked状态在提交前已经被修改为true，也会被打回初始状态。

解决方法 #

如果你想避免复选框被重置，只需要在action回调中显式阻止表单的默认重置行为即可：

<form action={(event) => {
  event.preventDefault(); // 阻止默认的表单重置操作
}}>

这样提交表单后，文本输入框和复选框的状态都会保留提交前的样子啦。

内容来源于stack exchange