如何让React自定义Textarea组件同时执行内部与传入的onChange函数？

要让组件内部的文本长度统计逻辑和父组件传入的onChange函数同时生效，只需要在内部的处理函数中调用父组件传递的onChange即可，具体修改如下：

修改后的完整代码 #

import React, { useState } from "react";

function Textarea(props) {
  const [textCount, settextCount] = useState(0);
  // 从props中解构出父组件传入的onChange函数
  const { id, onChange } = props;

  const recalculate = (e) => {
    // 执行内部的长度统计逻辑
    settextCount(e.target.value.length);
    // 调用父组件传入的onChange函数，可选链避免未传入时报错
    onChange?.(e);
  };

  return (
    <>
      <textarea type="text" id={id} onChange={recalculate} />
      <p>{textCount}/5</p>
    </>
  );
}
export default Textarea;

const App = (props) => {
  const change = async (e) => {
    props.changevalue(e);
  };
  return (
    <>
      <Textarea id="textarea1" onChange={change}/>
      <Textarea id="textarea2" />
    </>
  );
};

关键改动说明 #

• 在Textarea组件中，从props里解构出父组件传递的onChange函数
• 在内部的recalculate函数中，完成自身的长度统计后，调用onChange?.(e)：
  • 使用**可选链操作符?.**是为了兼容没有传入onChange的场景（比如第二个Textarea组件），避免出现函数未定义的报错
  • 如果需要支持异步处理事件对象，可在调用前添加e.persist()（React的合成事件池会回收事件对象，异步场景下需要保留）

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