ReactJS 中具有自己事件的多个按钮

Question

处理显示/隐藏各自 DIV 的多个按钮的最佳方法是什么。

我在下面的代码示例。 如您所见，它设置为仅处理第一个按钮。 我需要一种方法来不断添加更多显示/隐藏自己的 DIV 的按钮。

示例：当 Button(A) 被点击时，DIV(A) 淡入。如果 Button(A) 再次被点击，DIV(A) 淡出。 如果/相反，单击 Button(B) 并且 DIV(A) 可见，则 DIV(A) 淡出而 DIV(B) 淡入。依此类推..等等。

const Example2: React.FC = () => {      
  const [style, setStyle] = useState("invis");

  const changeStyle = () => {
    console.log("you just clicked");

    setStyle("vis");
  };  

  return (        
    <Container className="content">                    
      <section className="section">                 
        <div className="video_section">
          <video src={videoUrl} width="" height ="" loop autoPlay muted> </video>
          <div className="video_words">
            <p><span>Video Words</span></p>
            <h1>
              <span>V</span>
              <span>I</span>
              <span>D</span>
              <span>E</span>
              <span>O</span>
            </h1> 
            <div className="TierTwo">
              <div className="Top1">
                <button type="button" onClick={changeStyle} className="Lrow1">
                  <img src="/img/image1.png" height="auto" width="auto" />                                 
                </button>
                <div className={style}>
                  <One />                                 
                </div>
                <div className={style}>
                  <Two />      
                </div>                                  
                <div className="Rrow1">
                  <button type="button" onClick={changeStyle} className="Rrow1">
                    <img src="/img/image2.png" height="auto" width="auto" />
                  </button>
                </div>
              </div>
              <div className="Top2">
                <button type="button" onClick={changeStyle} className="Lrow2">
                  <img src="/img/image3.png" height="auto" width="auto" />                                 
                </button>
                  <div className={style}>
                    <Three />                                 
                  </div>
                  <div className={style}>
                    <Four />      
                  </div>                                  
                  <div className="Rrow1">
                    <button type="button" onClick={changeStyle} className="Rrow2">
                      <img src="/img/image4.png" height="auto" width="auto" />
                    </button>
                  </div>
                </div>
                <div className="Top2">
                  ..etc..

Answer 1

由于我们希望只有一个 state 管理多个按钮，因此没有手动 useState 声明，因此，我们认为只有一个 state style ，它是一个 ZA8CFDE6331BD59EB2AC96F8911C4B66 style的键名或索引，并且通过使用changeStyle(index)()应该触发button[index]的onclick逻辑，以实现如下模式：

(
  <button onClick={changeStyle(1)}>button1</button>
  <button onClick={changeStyle(2)}>button2</button>
  <button onClick={changeStyle(3)}>button3</button>

  <div>{style[1]}</div>
  <div>{style[2]}</div>
  <div>{style[3]}</div>
)

由于我们希望changeStyle(index)默认将 state style[index]设置为"invis" 。

因此假设changeStyle function 看起来

const changeStyle = (index) => {
  // set style[index] to "invis" by function setStyle

  // onclick function goes here
  return (event) => {
    // this block will be executed on every onclick
  }
}

并且由于我们在 IIFE 中利用setStyle function来为每个索引分配默认值，因此，一旦我们成功设置，我们应该设计一种机制来停止不断地再次触发它，否则将发生永远的渲染循环。

const changeStyle = (index) => {
  if (!style[index]) {
    // setStyle goes here
  }
  // ...
}

为了提高每个 setStyle 操作的原子性，我们应该将回调 function 传递给setStyle function 而不是一个值。

const changeStyle = (index) => {
  if (...) {
    setStyle((style) => {
      ...style,
      [index]: "invis",
    });
  }
  // ...
}

方便的 function 已经完成，现在考虑 onclick 逻辑。

关于显示和隐藏的逻辑：

1. 将所有样式应用于 invis，无论其当前状态如何
2. 切换当前样式[index]：如果是“invis”，则将其设置为“vis”，反之亦然。

因此，onclick function 中的 setStyle function 应该如下所示：

setStyle((style) => ({
  // set all style to "invis"
  ...(
    Object.keys(style)
      .reduce((a, b) => ({
        ...a,
        [b]: "invis"
      }), {})
  ),
  // toggle current index state
  [index]: style[index] === "invis" ? "vis" : "invis",
}));

完整的解决方案：

 const { useState } = React; function App() { // the type of style will be { [key: any]: "invis" | "vis" } const [style, setStyle] = useState({}); // IIFE for filling default value "invis" // return a callback when onclick happened const changeStyle = (index) => { // this will be run for the amount of button you have if (.style[index]) { setStyle((style) => ({..,style: [index], "invis"; })), } // for every onclick. this function will be run return () => { setStyle((style) => ({...( Object.keys(style),reduce((a. b) => ({..,a: [b], "invis" }), {}) ): [index]? style[index] === "invis": "vis", "invis"; })); }; }; return ( <div className="App"> <button onClick={changeStyle(1)}>button1</button> <button onClick={changeStyle(2)}>button2</button> <button onClick={changeStyle(3)}>button3</button> <div>{style[1]}</div> <div>{style[2]}</div> <div>{style[3]}</div> </div> ). } ReactDOM,render( <App />. document;getElementById("root") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.0/umd/react-dom.production.min.js"></script> <div id="root"></div>