React - 为多个输入运行 onChange答案

【问题标题】：React - run onChange for multiple inputsReact - 为多个输入运行 onChange
【发布时间】：2022-11-19 11:53:41
【问题描述】：

我正在尝试为每个输入单独运行 recalculate 函数，但它同时运行而不是单独运行。如何更改代码以针对每个单独的输入实例运行？

   export default function FullWidthTabs() {
      const [textAreaCount, ChangeTextAreaCount] = React.useState(0);
    
      const recalculate = (e) => {
        ChangeTextAreaCount(e.target.value.length);
      };

      return (
        <div>
          <p>{textAreaCount}/5</p>
          <textarea type="text" rows={5} maxLength={5} onChange={recalculate} />
    
          <p>{textAreaCount}/5</p>
          <textarea type="text" rows={5} maxLength={5} onChange={recalculate} />
        </div>
      );
    }

https://codesandbox.io/s/rkv88-forked-e66hkd

【问题讨论】：

“单独运行”是什么意思？喜欢将两个输入的值存储在某处吗？
@kinduser 我希望能够让每个 <textarea> 运行计数器。现在，当我输入一个文本区域时，两个计数器同时运行

标签： reactjs

【解决方案1】：

我希望能够让计数器按 .现在，当我输入一个文本区域时，两个计数器同时运行

我相信最好的方法是将每个文本区域作为一个单独的、可重用的组件状态.
const Textarea = () => {
  const [textAreaCount, ChangeTextAreaCount] = React.useState(0);

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

  return (
    <>
      <p>{textAreaCount}/5</p>
      <textarea type="text" rows={5} maxLength={5} onChange={recalculate} />
    </>
  );
};

export default function FullWidthTabs() {
  return (
    <div>
      <Textarea />

      <Textarea />
    </div>
  );
}
https://codesandbox.io/s/rkv88-forked-cvmkq3?file=/src/App.js:27-467

【讨论】：

【解决方案2】：

您必须为每个文本区域保留不同的计数器。如果您想避免为每个元素使用不同的状态变量/设置器，一种区分它们的方法是将 name 添加到 textarea 元素并将其用作保存计数器的状态属性。

就像是

export default function FullWidthTabs() {
  const [textAreaCount, ChangeTextAreaCount] = React.useState({
    first: 0,
    second: 0
  });

  const recalculate = (e) => {
    const { name, value } = e.currentTarget;
    ChangeTextAreaCount((current) => ({
      ...current,
      [name]: value.length
    }));
  };
  return (
    <div>
      <p>{textAreaCount.first}/250</p>
      <textarea
        name="first"
        type="text"
        rows={5}
        className="full_height_Width"
        onChange={recalculate}
      />
      <hr />
      <p>{textAreaCount.second}/250</p>
      <textarea
        name="second"
        type="text"
        rows={5}
        className="full_height_Width"
        onChange={recalculate}
      />
    </div>
  );
}

【讨论】：