React组件间输入数据传递实现：输入内容实时同步至另一组件H1

要实现输入内容实时显示在Screen的<h1>标签中，核心是状态提升——把输入状态放到父组件App中统一管理，让子组件通过props共享状态和修改方法：

修改步骤： #

1. 更新App.js（将状态提升至父组件） #

把原无状态函数组件改为带状态的组件，用useState管理输入内容，同时把状态和更新方法传递给子组件：

import { useState } from 'react';
import Inputs from './Inputs';
import Screen from './Screen';

export default function App() {
  // 管理输入内容的状态
  const [inputValue, setInputValue] = useState('');

  // 用于更新输入状态的方法
  const handleInputChange = (value) => {
    setInputValue(value);
  };

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      {/* 把更新方法传给Inputs组件 */}
      <Inputs onInputChange={handleInputChange} />
      {/* 把当前输入值传给Screen组件 */}
      <Screen displayText={inputValue} />
    </div>
  );
}

2. 修改Inputs.js（复用父组件的状态与方法） #

移除组件自身的状态，通过props接收输入更新方法：

class Inputs extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    // 调用父组件传来的方法更新全局状态
    this.props.onInputChange(event.target.value);
  }
  handleSubmit(event) {
    alert('Value: ' + event.target[0].value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
          <input type="text" onChange={this.handleChange} />
        <input type="submit" value="Enter" />
      </form>
    );
  }
}
export default Inputs;

3. 修改Screen.js（接收并渲染父组件传递的内容） #

通过props获取要显示的文本，替换原固定内容：

class Screen extends React.Component {
  render() {
    return (
      <div className="screen">
        {/* 显示父组件传来的实时输入值，为空时显示默认提示 */}
        <h1>{this.props.displayText || 'Text from input'}</h1>
      </div>
    );
  }
}
export default Screen;

核心逻辑： #

• 父组件App作为唯一状态源，统一管理输入内容
• Inputs组件仅负责触发输入事件，调用父方法更新状态
• Screen组件仅负责接收最新状态并渲染
• 输入时状态实时更新，Screen会自动重新渲染展示最新内容

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