React中如何从一个组件触发另一个组件的元素点击事件？

要实现点击侧边栏ComponentTwo里的元素，触发主组件ComponentOne的按钮操作，最直接的方案是用共同的父组件App作为中间层传递事件——这是React处理兄弟组件通信的标准做法。下面是具体的代码修改步骤：

1. 重构App.js：统一管理状态与方法 #

把ComponentOne里的状态和保存逻辑移到App组件里，再通过props把这些内容传递给两个子组件：

import { useState } from "react";
import ComponentOne from "./ComponentOne";
import ComponentTwo from "./ComponentTwo";

export default function App() {
  const [inputedText, setInputText] = useState('');

  const handleChange = (event) => {
    const newValue = event.target.value;
    setInputText(newValue);
  };

  const saveText = () => {
    alert("Your text has been saved");
  };

  return (
    <>
      <ComponentOne 
        inputedText={inputedText} 
        handleChange={handleChange} 
        saveText={saveText} 
      />
      <ComponentTwo onSaveClick={saveText} />
    </>
  );
}

2. 修改ComponentOne：通过props接收数据与方法 #

ComponentOne不再自己维护状态，直接用父组件传过来的props渲染：

export default function ComponentOne({ inputedText, handleChange, saveText }) {
  return (
    <>
      <input type="text" value={inputedText} onChange={handleChange} />
      <button onClick={saveText}>Save text</button>
    </>
  );
}

注意：原代码里export default ComponentOne()是语法错误，要改成标准的函数声明形式export default function ComponentOne()

3. 修改ComponentTwo：绑定点击事件触发父方法 #

给ComponentTwo里的Save Text列表项加上点击事件，调用父组件传过来的保存方法：

export default function ComponentTwo({ onSaveClick }) {
  return (
    <>
      <nav>
        <ul>
          <li onClick={onSaveClick}>Save Text</li>
        </ul>
      </nav>
    </>
  );
}

同样，原代码的export default ComponentTwo()语法错误，需修正为函数声明

为什么这么做？ #

• 把共享的状态和操作逻辑放到父组件，符合React的单一数据源原则，避免多组件维护同一份数据导致的不一致
• 父组件通过props把需要的内容分发给子组件，ComponentOne负责渲染输入框和按钮，ComponentTwo负责触发保存操作，职责清晰
• 点击ComponentTwo的列表项时，本质是调用了和ComponentOne按钮相同的saveText方法，自然就能触发相同的保存逻辑

内容的提问来源于stack exchange，提问作者Priscilla-Egberi