如何在父组件中修改传入子组件的input元素的值？

核心思路 #

你传入的Input是受控组件（值由父组件的state和setState控制），遵循React单向数据流规则，子组件不能直接修改父组件状态，必须通过回调函数触发父组件的状态更新，从而同步Input的值。

方案一：传递修改状态的回调函数（推荐） #

这是最符合React设计理念的实现方式，通过给FooterOptions传递回调函数，让它能触发父组件的状态更新。

父组件代码修改：

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

function ParentComponent() {
  const [inputValue, setInputValue] = useState('');

  // 定义供FooterOptions调用的修改函数
  const updateInput = (newValue) => {
    setInputValue(newValue);
  };

  return (
    <FooterOptions onUpdateInput={updateInput}>
      <input 
        type="text"
        onChange={(e) => setInputValue(e.target.value)}
        value={inputValue}
        hidden
      />
    </FooterOptions>
  );
}

FooterOptions组件修改：

import { ReactNode } from 'react';

export function FooterOptions(props: { 
  children: ReactNode; 
  onUpdateInput: (value: string) => void; 
}) {
  // 示例：点击按钮修改Input值
  const handleModify = () => {
    props.onUpdateInput('从FooterOptions修改后的内容');
  };

  return (
    <div>
      {props.children}
      <button onClick={handleModify}>修改隐藏Input的值</button>
    </div>
  );
}

方案二：使用React.cloneElement增强子元素 #

如果不想额外传递props，可以通过React.cloneElement给传入的Input添加ref或属性，在FooterOptions中触发状态更新。这种方式适合简单场景，优先推荐方案一。

父组件代码：

import { useState, useRef } from 'react';
import { FooterOptions } from './FooterOptions';

function ParentComponent() {
  const [inputValue, setInputValue] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <FooterOptions setInputValue={setInputValue}>
      {React.cloneElement(props.children as React.ReactElement, { ref: inputRef })}
    </FooterOptions>
  );
}

FooterOptions组件代码：

import { ReactNode } from 'react';

export function FooterOptions(props: { 
  children: ReactNode; 
  setInputValue: (value: string) => void;
}) {
  const handleModify = () => {
    props.setInputValue('通过cloneElement修改的值');
  };

  return (
    <div>
      {props.children}
      <button onClick={handleModify}>修改Input值</button>
    </div>
  );
}

注意事项 #

• 受控组件遵循状态驱动视图原则，禁止直接修改DOM值，必须通过更新state同步视图。
• 子组件只能通过父组件传递的回调函数修改父组件状态，这是React单向数据流的核心规则。

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