javascript - react : Trigger button click from array map by another child

Question

我有一个父组件App它有一个 child Content & Trigger 。来自Content组件，我有一个包含单选按钮和一个隐藏的按钮的内容数组。 Trigger组件只有一个按钮。 🤔

我的问题是，如何触发 Content 内的按钮单击来自 Trigger 的组件组件取决于用户在 Content 上选择的内容成分。 🤯

如果我的解释很难理解，也许我的代码很难理解。谢谢。 🙏

CodeSandbox 示例
https://codesandbox.io/s/laughing-kirch-g2r10?fontsize=14&hidenavigation=1&theme=dark

App.js

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

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

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

  onClickTriggerButton = e => {
    const { selectedOption } = this.state;
    e.preventDefault();
    switch (selectedOption) {
      case "opt1":
        console.log("trigger click on option 1");
        break;
      case "opt2":
        console.log("trigger click on option 2");
        break;
      case "opt3":
        console.log("trigger click on option 3");
        break;
      default:
        console.log("Select a method...");
    }
  };

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

export default App;

内容.js

import React from "react";

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

    const tabs = [
      {
        name: "option_1_name",
        content: (
          <div className="Option-Method">
            <input
              type="radio"
              name="group"
              onChange={() => onRadioButtonChange("opt1")}
            />
            Option Medthod 1 - Randon text...
            <button
              hidden
              onClick={() => console.log("option 1 button clicked!")}
            />
          </div>
        )
      },
      {
        name: "option_2_name",
        content: (
          <div className="Option-Method">
            <input
              type="radio"
              name="group"
              onChange={() => onRadioButtonChange("opt2")}
            />
            Option Medthod 2 - Randon text...
            <button
              hidden
              onClick={() => console.log("option 2 button clicked!")}
            />
          </div>
        )
      },
      {
        name: "option_3_name",
        content: (
          <div className="Option-Method">
            <input
              type="radio"
              name="group"
              onChange={() => onRadioButtonChange("opt3")}
            />
            Option Medthod 3 - Randon text...
            <button
              hidden
              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;

触发器.js

import React from "react";

class Trigger extends React.PureComponent {
  render() {
    const { onClickTriggerButton } = this.props;

    return (
      <div className="Trigger">
        <button onClick={onClickTriggerButton}>Trigger Selected Option</button>
      </div>
    );
  }
}

export default Trigger;

Answer 1

将引用传递给内容组件，并为每个隐藏按钮检查 selectedOption 是否与该隐藏按钮的设置引用匹配。还将 Content 组件包装在 React.forwardRef 中。

<button
   hidden
   ref={"opt1" === selectedOption ? ref : null}
   onClick={() => console.log("option 1 button clicked!")}
/>

https://codesandbox.io/s/strange-hodgkin-jm84w?file=/src/Content.js:507-671