React如何为每个<Textarea/>实例传入自定义textAreaCount等Props

你的代码存在几个核心问题导致无法实现需求：组件Props接收方式错误、内部状态管理混乱、受控组件逻辑错误。下面是具体修改方案：

1. 修正组件Props接收方式 #

React函数组件的Props是单个对象参数，而非分散的独立参数。需要解构传入的Props对象，同时新增initialCount属性用于自定义初始计数。

2. 实现受控模式 + 自定义初始计数 #

每个Textarea作为受控组件，由父组件管理输入值；同时允许通过initialCount传入自定义初始计数，默认值设为0，满足不同实例的计数差异化需求。

3. 修复计数更新逻辑 #

移除组件内部冗余的headline/title状态，直接基于输入框实时值更新计数，同时将输入变更同步给父组件，符合React单向数据流原则。

修改后的完整代码 #

import React, { useState } from "react";

// 修正Props接收方式，新增initialCount支持自定义初始计数
const Textarea = ({ value, id, maxLength, textAreaLimit, initialCount = 0, onChange }) => {
  // 使用传入的initialCount作为计数初始值
  const [textAreaCount, setTextAreaCount] = useState(initialCount);

  const handleChange = (e) => {
    const inputValue = e.target.value;
    // 更新当前输入的计数
    setTextAreaCount(inputValue.length);
    // 将新值同步给父组件
    onChange(inputValue);
  };

  return (
    <>
      <p>{textAreaCount}/{textAreaLimit}</p>
      <textarea
        rows={5}
        id={id}
        value={value}
        maxLength={maxLength}
        onChange={handleChange}
      />
    </>
  );
};

export default function FullWidthTabs() {
  // 父组件维护每个Textarea的输入值状态
  const [headline, setHeadline] = useState("");
  const [title, setTitle] = useState("");

  return (
    <div>
      {/* 第一个实例：自定义初始计数为2，限制最多输入5个字符 */}
      <Textarea
        value={headline}
        id="test"
        maxLength={5}
        textAreaLimit={5}
        initialCount={2}
        onChange={setHeadline}
      />

      {/* 第二个实例：初始计数为0，限制最多输入10个字符 */}
      <Textarea
        value={title}
        id="test2"
        maxLength={10}
        textAreaLimit={10}
        initialCount={0}
        onChange={setTitle}
      />
    </div>
  );
}

关键修改点说明 #

• Props接收修正：将(value, id, ...)改为解构对象({ value, id, initialCount, ... })，这是React函数组件接收Props的标准方式。
• 自定义初始计数：新增initialCount Props，作为textAreaCount的初始状态值，实现每个实例的计数初始值差异化。
• 受控组件优化：移除组件内部的headline/title冗余状态，由父组件统一管理输入值，通过onChange回调同步数据，避免状态混乱。
• 计数逻辑修复：直接基于输入框的实时值更新计数，解决原代码中误用Props旧值的错误。

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