React函数组件间如何传值与传函数 输入框值如何传到App组件展示

核心逻辑采用状态提升模式，将输入框对应的状态放在父组件App中管理，父组件把修改状态的函数传递给子组件，子组件输入时触发回调把最新值回传给父组件更新状态，状态更新后App的h1标签会自动渲染最新值。
完整实现代码如下：

父组件App代码 #

import { useState } from 'react';
import InputComponent from './InputComponent';

export default function App() {
  // 父组件存储输入框的状态
  const [inputContent, setInputContent] = useState('');

  return (
    <div>
      {/* 状态更新后h1自动渲染最新内容 */}
      <h1>{inputContent}</h1>
      {/* 将更新状态的函数作为prop传给子组件 */}
      <InputComponent updateInput={setInputContent} />
    </div>
  );
}

子组件（包含输入框）代码 #

export default function InputComponent({ updateInput }) {
  return (
    <input
      type="text"
      placeholder="请输入内容"
      // 输入事件触发时，调用父组件传入的更新函数，把当前输入值作为参数传递
      onChange={(e) => updateInput(e.target.value)}
    />
  );
}

• 传值适用场景：父组件需要给子组件传递仅用于读取、不需要被子组件修改的内容时，直接传值。比如静态文案、父组件维护的状态展示、配置项参数等，子组件拿到值只做渲染或逻辑判断，不需要修改源状态，就直接传值即可。
• 传函数适用场景：子组件需要修改父组件维护的状态、或者子组件的事件触发后需要通知父组件执行对应逻辑时，就传函数。比如输入框内容变化、点击子组件的删除按钮、提交子组件的表单等操作，都会影响父组件的状态，此时父组件把修改状态的逻辑封装成函数传给子组件，子组件在对应事件触发时调用该函数，把需要的参数回传即可。

核心判断标准：子组件是否需要修改对应prop的源数据，不需要修改就传值，需要修改就传修改用的函数。

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