React：通过子组件触发数组映射中对应隐藏按钮的点击事件

我来帮你搞定这个需求！你现在想通过Trigger组件的按钮，触发Content里用户选中选项的隐藏按钮点击事件，对吧？这里有两种实用的方案，我分别给你拆解一下：

方案一：逻辑上移（推荐，符合React单向数据流） #

这种方案是把隐藏按钮的点击逻辑从Content组件移到父组件App里，这样Trigger点击时直接调用对应逻辑，不需要操作DOM，更符合React的设计理念。

修改后的代码： #

App.js

import React from "react";
import Content from "./Content";
import Trigger from "./Trigger";
import "./styles.css";

class App extends React.PureComponent {
  state = { selectedOption: "" };

  // 把每个选项的点击逻辑统一放在父组件
  optionClickHandlers = {
    opt1: () => console.log("option 1 button clicked!"),
    opt2: () => console.log("option 2 button clicked!"),
    opt3: () => console.log("option 3 button clicked!")
  };

  onRadioButtonChange = (name) => {
    this.setState({ selectedOption: name });
  };

  onClickTriggerButton = (e) => {
    e.preventDefault();
    const { selectedOption } = this.state;
    // 根据选中的选项调用对应逻辑
    const handler = this.optionClickHandlers[selectedOption];
    if (handler) {
      handler();
    } else {
      console.log("Select a method...");
    }
  };

  render() {
    // 把选项数据移到父组件，方便绑定逻辑
    const tabs = [
      {
        key: "opt1",
        label: "Option Method 1 - Random text...",
        onClick: this.optionClickHandlers.opt1
      },
      {
        key: "opt2",
        label: "Option Method 2 - Random text...",
        onClick: this.optionClickHandlers.opt2
      },
      {
        key: "opt3",
        label: "Option Method 3 - Random text...",
        onClick: this.optionClickHandlers.opt3
      }
    ];

    return (
      <div className="App">
        <Content 
          tabs={tabs} 
          onRadioButtonChange={this.onRadioButtonChange} 
        />
        <Trigger onClickTriggerButton={this.onClickTriggerButton} />
      </div>
    );
  }
}

export default App;

Content.js

import React from "react";

class Content extends React.PureComponent {
  render() {
    const { tabs, onRadioButtonChange } = this.props;

    return (
      <form className="Content">
        <fieldset id="group">
          {tabs.map((tab) => (
            <div key={tab.key} className="Option">
              <div className="Option-Method">
                <input
                  type="radio"
                  name="group"
                  onChange={() => onRadioButtonChange(tab.key)}
                />
                {tab.label}
                {/* 直接使用父组件传递的点击逻辑 */}
                <button hidden onClick={tab.onClick} />
              </div>
            </div>
          ))}
        </fieldset>
      </form>
    );
  }
}

export default Content;

Trigger.js不需要修改，保持原来的样子即可。这种方案的好处是逻辑集中在父组件，数据流清晰，后期维护起来更方便，也避免了直接操作DOM的潜在问题。

方案二：使用Ref触发DOM点击事件 #

如果你的隐藏按钮里有复杂的内部逻辑，不想把它移到父组件，那可以通过Ref获取按钮的DOM元素，然后直接调用click()方法触发点击。

修改后的代码： #

App.js

import React from "react";
import Content from "./Content";
import Trigger from "./Trigger";
import "./styles.css";

class App extends React.PureComponent {
  state = { selectedOption: "" };
  // 用对象存储每个选项的按钮Ref
  buttonRefs = {};

  // 注册按钮Ref的方法，传递给Content组件
  registerButtonRef = (key, ref) => {
    this.buttonRefs[key] = ref;
  };

  onRadioButtonChange = (name) => {
    this.setState({ selectedOption: name });
  };

  onClickTriggerButton = (e) => {
    e.preventDefault();
    const { selectedOption } = this.state;
    const targetButton = this.buttonRefs[selectedOption];
    if (targetButton) {
      // 触发按钮的DOM点击事件
      targetButton.click();
    } else {
      console.log("Select a method...");
    }
  };

  render() {
    return (
      <div className="App">
        <Content 
          onRadioButtonChange={this.onRadioButtonChange}
          registerButtonRef={this.registerButtonRef}
        />
        <Trigger onClickTriggerButton={this.onClickTriggerButton} />
      </div>
    );
  }
}

export default App;

Content.js

import React from "react";

class Content extends React.PureComponent {
  render() {
    const { onRadioButtonChange, registerButtonRef } = this.props;
    const tabs = [
      {
        name: "option_1_name",
        key: "opt1",
        content: (
          <div className="Option-Method">
            <input
              type="radio"
              name="group"
              onChange={() => onRadioButtonChange("opt1")}
            />
            Option Method 1 - Random text...
            {/* 注册按钮Ref到父组件 */}
            <button 
              hidden 
              ref={(ref) => registerButtonRef("opt1", ref)}
              onClick={() => console.log("option 1 button clicked!")} 
            />
          </div>
        )
      },
      {
        name: "option_2_name",
        key: "opt2",
        content: (
          <div className="Option-Method">
            <input
              type="radio"
              name="group"
              onChange={() => onRadioButtonChange("opt2")}
            />
            Option Method 2 - Random text...
            <button 
              hidden 
              ref={(ref) => registerButtonRef("opt2", ref)}
              onClick={() => console.log("option 2 button clicked!")} 
            />
          </div>
        )
      },
      {
        name: "option_3_name",
        key: "opt3",
        content: (
          <div className="Option-Method">
            <input
              type="radio"
              name="group"
              onChange={() => onRadioButtonChange("opt3")}
            />
            Option Method 3 - Random text...
            <button 
              hidden 
              ref={(ref) => registerButtonRef("opt3", ref)}
              onClick={() => console.log("option 3 button clicked!")} 
            />
          </div>
        )
      }
    ];

    return (
      <form className="Content">
        <fieldset id="group">
          {tabs.map((attribute, index) => {
            const key = `${attribute.name}-${index}`;
            return (
              <div key={key} className="Option">
                {attribute.content}
              </div>
            );
          })}
        </fieldset>
      </form>
    );
  }
}

export default Content;

这种方案直接操作DOM，适合不想重构原有逻辑的场景，但要注意组件卸载后Ref可能会失效，使用时要做好判断。

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