如何为复用的React Textarea组件动态设置maxLength属性

你的代码里存在几个关键问题，导致无法实现maxLength的动态传递，下面是修正方案和具体说明：

核心修改点 #

• 不需要将maxLength存在组件内部state中，父组件传入的props可以直接使用，额外维护state会造成数据不同步
• textarea的maxLength属性绑定错误，你当前用了状态更新函数setmaxLength，应该直接使用父组件传递的props.maxLength
• 底部计数显示固定为/5，需要改成和当前组件maxLength对应的动态值
• 给组件设置默认的maxLength值，避免未传参时出错

修正后的完整代码 #

import React, { useState } from "react";

function Textarea(props) {
  // 解构props并设置默认值，未传maxLength时默认用5
  const { maxLength = 5 } = props;
  const [textAreaCount, setTextAreaCount] = useState(0);

  const recalculate = (e) => {
    setTextAreaCount(e.target.value.length);
  };

  return (
    <>
      <textarea
        maxLength={maxLength}
        onChange={recalculate}
        // 如需做成受控组件，可添加value属性接收外部传入的内容
        // value={props.value}
      />
      <p>{textAreaCount}/{maxLength}</p>
    </>
  );
}

export default Textarea;

const App = () => {
  return (
    <>
      <Textarea maxLength={10} />
      <Textarea maxLength={5} />
      {/* 不传maxLength时会使用默认值5 */}
      <Textarea />
    </>
  );
};

关键说明 #

1. 通过解构赋值直接获取props.maxLength，同时设置默认值，保证组件在未传参时也能正常运行
2. 移除了多余的maxLength状态变量，直接使用props传递的值，确保父组件修改参数时，子组件能实时同步更新
3. 修正textarea的maxLength绑定，改为正确的maxLength变量
4. 底部计数显示改为动态拼接，和当前组件的maxLength保持一致
5. 去掉了textarea标签多余的type属性（textarea本身不需要该属性）

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