文本字段更改的值未在 OnSubmit 中更新 - React-Hook-Form 和 React Js

Posted 2023-02-22

【中文标题】文本字段更改的值未在 OnSubmit 中更新 - React-Hook-Form 和 React Js

【英文标题】：Text Field Changed Value not updating in OnSubmit - React-Hook-Form & React Js

【发布时间】：2021-12-05 18:50:02

【问题描述】：

我是 React 新手。我在尝试处理表单提交时遇到问题。

任何知道这个答案的人请告诉我，使用 React Material-UI、React-Hook-Form 和控制器。

我的程序有 3 个文本字段。 计算： PendingTime=ActualTime-工作时间； 实际时间是默认值（值为 5）。当我更改 WorkTime Text 字段值时， 待定时间自动更新待定时间值。我在 WorkTime Text 字段中添加了 onChange 事件。在 OnSubmit 事件中，我需要获取实际时间值、WorkTimeValue 和 PendingTimeValue。但我无法获得 onSubmit 的值。

我在 CodeSandbox 中编写了我的代码。 React-hook-form TextFieldChange value not trigged in onSubmit Event

截图：

【参考方案1】：

完全删除您的form 标签，并将 onSubmit 处理程序放在 Box 组件中。 看，您将其组件分配给form，这意味着您的表单中有一个嵌套表单。提交按钮在嵌套表单内，onClick 不调用外部表单内的onSubmit 函数。 一些 Material-Ui 组件接受 component 属性，并创建一个具有该指定值的 html 标记。

return (
    <Box
      onSubmit=handleSubmit(onSubmit)
      component="form"
      sx=
        "& > :not(style)":  m: 1, width: "25ch" 
      
      noValidate
      autoComplete="off"
    >
        // ...
    </Box>
);

CodeSandBox Example

【参考方案2】：

为了回答您的问题，不提交表单的原因是因为您没有将 Button 组件绑定到输入，将此道具添加到您的组件中，您将能够提交表单

<Button variant="contained" type="submit">Submit</Button>

type="submit" 应该允许提交表单。

现在你已经有了答案，但你没有正确使用 react hook 形式，你不应该将 React.useState 与 react-hook-form 混用，因为它会丢失目的，请阅读有关如何将register 钩子与输入一起使用的文档，如果您需要更新其中一个输入值，只需watch 进行输入更改，您将被阅读。

您还会收到警告，因为您有一个嵌套在表单中的表单，因此不要将框用作表单，而是将其更改为 div 或任何有效的 html 嵌套：

  <Box
    component="div"
    sx=
      "& > :not(style)":  m: 1, width: "25ch" 
    
  >

这是一个工作沙箱，其中包含您想要执行的所有功能： Working sandbox

这包括每次更改实际时间和工作时间时计算挂起时间，它会正确提交，因为你不需要它，useState 也会被删除。