TextareaAutosize With Formik? 使用Formik实现TextareaAutosize？

13 浏览
0 Comments

TextareaAutosize With Formik? 使用Formik实现TextareaAutosize？

我正在使用react-textarea-autosize和formik，我想知道如何正确地将formik的change事件与TextareaAutosize关联起来。\n所以当我提交表单时，我可以看到文本区域中输入的数据，但是当我在文本区域中按下\"Enter\"键时，我会收到以下错误信息：\n

onloadwff.js:71 Assertion failed: Input argument is not an HTMLInputElement
getFormProfile @ onloadwff.js:71
setFieldValue @ onloadwff.js:71
formKeydownListener @ onloadwff.js:71
onloadwff.js:71 Uncaught TypeError: Cannot read property 'type' of undefined
at e.setFieldValue (onloadwff.js:71)
at HTMLFormElement.formKeydownListener (onloadwff.js:71)
setFieldValue @ onloadwff.js:71
formKeydownListener @ onloadwff.js:71

0

3 答案

0 Comments

问题：使用Formik和TextareaAutosize时，TextAreaField组件无法正常工作。

原因：在TextAreaField组件中，FormikField组件没有正确地将field属性传递给TextareaAutosize组件。

解决方法：修改TextAreaField组件中的FormikField组件的代码，将field属性正确地传递给TextareaAutosize组件。

修正后的代码如下：

import { Form, Formik, Field as FormikField } from "formik";
...
const TextAreaField = ({maxRows, minRows, ...props}) => {
   return (
    
      {({ field }) => }
    
   );
}
...
const MyForm = () => {
   ...
   return (
    
      

         
      
    

   );
};

经过修正后，TextAreaField组件将正确地将field属性传递给TextareaAutosize组件，问题得到解决。

0
0 Comments

问题：TextareaAutosize与Formik一起使用时出现的错误是什么原因，以及如何解决？

当使用TextareaAutosize组件与Formik库一起使用时，可能会遇到来自Lastpass插件/扩展的错误。在某些情况下，Lastpass会干扰TextareaAutosize组件的正常功能，导致错误的发生。

解决方法如下：

1. 通过Lastpass插件/扩展解决：

- 点击插件图标并打开Vault

- 进入"帐户设置"页面

- 转到"Never URLs"选项卡

- 添加"http://localhost"（或您使用的URL），并选择"不执行任何操作"作为类型

2. 通过代码解决：

- 在表单元素上添加"data-lpignore='true'"属性

- 禁止事件传播，特别是对于Lastpass监听的"Enter"键事件

以下是通过代码解决的示例代码：

// 添加"data-lpignore='true'"属性到表单元素


  

    
    

      
    

  



// 停止事件传播的事件处理器
document.addEventListener('keydown', handleHitEnter, true);
function handleHitEnter(event: globalThis.KeyboardEvent) {
  if (event && event.key === "Enter") {
    event.stopPropagation();
  }
}

对于Angular和React，还可以使用事件处理程序来停止事件传播：



// Angular中的事件处理程序
enterEventHandler($event: KeyboardEvent): boolean {
  $event.stopPropagation()
  // 处理表单提交
}


// React中的事件处理程序
function enterEventHandler(event: KeyboardEvent) {
  if (event && event.key === "Enter") {
    event.stopPropagation();
  }
}

参考资料：

1. [Error when hitting enter... Github discussion](https://github.com/KillerCodeMonkey/ngx-quill/issues/351)

2. [Stop LastPass filling out a form StackOverflow discussion](https://stackoverflow.com/questions/20954944/44984917#44984917)

0
0 Comments

原因：出现这个问题与Formik无关。错误是由于Chrome扩展程序lastpass中的onloadwff.js文件引起的。

解决方法：可以尝试在隐私模式下运行浏览器，或者禁用浏览器中的插件，这样错误就不会出现了。

0