React实现多个textarea的onChange独立触发recalculate函数

要让两个输入框各自独立更新字符计数，核心是给每个输入框分配独立的状态变量，或者用一个对象状态分别存储每个输入框的计数，避免共享单个状态导致同步更新。下面提供两种可行的修改方案：

方案一：使用对象状态存储多个计数 #

这种方式适合后续需要扩展更多输入框的场景，只需要在状态对象中添加新字段即可：

export default function FullWidthTabs() {
  // 用对象存储两个输入框的字符计数，初始值都为0
  const [textAreaCounts, setTextAreaCounts] = React.useState({
    count1: 0,
    count2: 0
  });

  const recalculate = (e) => {
    const { name, value } = e.target;
    // 函数式更新状态，保留原有其他计数，只更新当前输入框对应的数值
    setTextAreaCounts(prevState => ({
      ...prevState,
      [name]: value.length
    }));
  };

  return (
    <div>
      <p>{textAreaCounts.count1}/5</p>
      {/* 给textarea添加name属性，对应状态对象中的字段名 */}
      <textarea 
        name="count1"
        type="text" 
        rows={5} 
        maxLength={5} 
        onChange={recalculate} 
      />

      <p>{textAreaCounts.count2}/5</p>
      <textarea 
        name="count2"
        type="text" 
        rows={5} 
        maxLength={5} 
        onChange={recalculate} 
      />
    </div>
  );
}

修改要点： #

• 将单个数值状态改为包含多个字段的对象，每个字段对应一个输入框的计数
• 给每个textarea添加name属性，用来标识当前触发事件的输入框
• 在recalculate函数中，通过e.target.name定位要更新的状态字段，使用函数式更新确保不会覆盖其他输入框的计数

方案二：为每个输入框单独声明状态 #

如果输入框数量较少，这种方式更直观，代码逻辑更清晰：

export default function FullWidthTabs() {
  // 为每个输入框单独声明状态变量
  const [count1, setCount1] = React.useState(0);
  const [count2, setCount2] = React.useState(0);

  // 每个输入框对应独立的处理函数
  const updateCount1 = (e) => {
    setCount1(e.target.value.length);
  };

  const updateCount2 = (e) => {
    setCount2(e.target.value.length);
  };

  return (
    <div>
      <p>{count1}/5</p>
      <textarea type="text" rows={5} maxLength={5} onChange={updateCount1} />

      <p>{count2}/5</p>
      <textarea type="text" rows={5} maxLength={5} onChange={updateCount2} />
    </div>
  );
}

修改要点： #

• 为每个输入框单独创建useState变量，存储各自的字符计数
• 每个textarea绑定专属的onChange处理函数，只更新自身对应的状态变量

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