React中如何向已带参数的函数组件传值并获取子组件返回值

你现在写的CommaFunc不是React组件，只是onChange事件里调用的普通工具函数，这种场景不需要用props传值，直接让函数返回目标值就能拿到内部的realOutput，实现最简单。

修改CommaFunc，返回要回传的值 #

// commaFunc.js
export default function(e) {
    let realOutput = 100;
    // 保留你原本针对event对象的所有处理逻辑
    return realOutput;
}

父组件调用时接收返回值 #

在父组件里加个state存回传的值，后续渲染、参与计算都可以直接用：

// AddCommaToNumber.js
import React, { useState } from 'react';
import CommaFunc from './commaFunc'; // 补全对应文件导入路径

function AddCommaToNumber() {
  const [value, setValue] = useState("");
  // 新增state存储回传的realOutput
  const [realOutput, setRealOutput] = useState(null);

  return (
    <div>
      <input
        value={value}
        onChange={(e) => { 
          const outputVal = CommaFunc(e);
          setRealOutput(outputVal); // 拿到值后存入父组件状态
          setValue(e.target.value); 
        }}
        type="text"
      />
      {/* 直接使用回传值 */}
      <p>回传的realOutput：{realOutput}</p>
    </div>
  );
}

props传值的方案只适用于CommaFunc是真正的React组件（即通过<CommaFunc />这种JSX标签形式渲染在父组件中）的场景：父组件通过props传一个接收值的回调给子组件，子组件内部处理完realOutput后调用这个回调把值传出来。
按你当前的代码逻辑，CommaFunc只在输入事件触发时执行，没有独立渲染UI的需求，完全没必要改造成组件，用普通函数返回值的方案代码量最少、逻辑最清晰。

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