NextJS中textarea组件输入处理类型错误解决问询

错误根源 #

你混淆了事件处理函数类型和事件对象类型：

• FormEventHandler<HTMLTextAreaElement>是表单提交类事件的处理函数类型（签名为(event: FormEvent) => void），不适用于textarea的onChange事件。
• textarea的onChange事件需要接收ChangeEvent<HTMLTextAreaElement>类型的事件对象，对应的处理函数类型是ChangeEventHandler<HTMLTextAreaElement>。

正确修改方案 #

方案1：指定事件对象类型

修改onChangeVar的参数类型为ChangeEvent<HTMLTextAreaElement>，通过event.target.value获取输入内容：

const onChangeVar = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
  // 获取textarea输入内容
  const inputValue = event.target.value;
  console.log('输入内容:', inputValue);
  // 后续业务处理逻辑...
};

方案2：用ChangeEventHandler约束函数

直接用ChangeEventHandler类型定义函数，写法更简洁：

const onChangeVar: React.ChangeEventHandler<HTMLTextAreaElement> = (event) => {
  const inputValue = event.target.value;
  console.log('输入内容:', inputValue);
  // 后续业务处理逻辑...
};

完整组件示例 #

import React, { useState } from 'react';

const TextAreaComponent = () => {
  const [fldNm, setFldNm] = useState('');
  const pcHld = '请输入内容...';

  const onChangeVar = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
    const inputValue = event.target.value;
    setFldNm(inputValue); // 更新组件状态
    console.log('输入内容:', inputValue);
  };

  return (
    <textarea 
      placeholder={pcHld}
      value={fldNm}
      onChange={onChangeVar}
      className="bg-cyan-300"
      rows={3} cols={20} 
    />
  );
};

export default TextAreaComponent;

内容的提问来源于stack exchange，提问作者Michel