React中如何实现父组件点击按钮时向子组件传递输入框值并展示？

没问题，这是React里非常常见的父子组件跨层级传值场景，咱们可以通过顶层的App.js维护共享状态，让父组件触发状态更新，再把状态传递给子组件来实现需求。下面是完整的代码实现：

Child.js（子组件） #

子组件的职责很简单，就是接收父级传递过来的值，然后在<p>标签里展示出来：

import React from 'react';

const Child = ({ displayValue }) => {
  return <p>你输入的内容是：{displayValue}</p>;
};

export default Child;

Parent.js（父组件） #

父组件包含文本框和按钮，咱们需要在这处理输入逻辑，然后点击按钮时把值传递给顶层的App组件：

import React, { useState } from 'react';

const Parent = ({ onValueSubmit }) => {
  // 用useState维护文本框的输入内容
  const [inputVal, setInputVal] = useState('');

  // 实时更新文本框的输入状态
  const handleInputChange = (e) => {
    setInputVal(e.target.value);
  };

  // 点击按钮时，把当前输入的值通过回调传给App
  const handleButtonClick = () => {
    onValueSubmit(inputVal);
  };

  return (
    <div style={{ marginBottom: '1rem' }}>
      <input
        type="text"
        value={inputVal}
        onChange={handleInputChange}
        placeholder="请输入内容"
        style={{ padding: '0.5rem', marginRight: '0.5rem' }}
      />
      <button onClick={handleButtonClick} style={{ padding: '0.5rem 1rem' }}>
        传递给子组件
      </button>
    </div>
  );
};

export default Parent;

App.js（顶层组件） #

这里是整个状态的核心管理者，咱们定义一个状态来存储要传递给子组件的值，同时把更新状态的方法传给父组件，再把状态值传给子组件：

import React, { useState } from 'react';
import Parent from './Parent';
import Child from './Child';

function App() {
  // 维护用于传递给子组件的共享状态
  const [passedValue, setPassedValue] = useState('');

  // 接收父组件传过来的值，更新共享状态
  const handleValueSubmit = (value) => {
    setPassedValue(value);
  };

  return (
    <div className="App" style={{ padding: '2rem', fontFamily: 'Arial, sans-serif' }}>
      <h1>父子组件传值演示</h1>
      <Parent onValueSubmit={handleValueSubmit} />
      <Child displayValue={passedValue} />
    </div>
  );
}

export default App;

简单说下工作流程： #

1. 你在父组件的文本框输入内容时，父组件内部的inputVal状态会实时更新，保证输入内容和文本框同步；
2. 点击按钮后，父组件会调用从App传过来的onValueSubmit回调，把当前的输入值传给App；
3. App接收到值后，更新自己的passedValue状态，这个状态会自动传递给子组件；
4. 子组件拿到displayValue属性后，立刻在<p>标签里渲染出你输入的内容。

这样就完全实现了你要的需求啦～

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