當我單擊反應中的按鈕時，如何定位和更改不同元素的樣式

Question

當我單擊一個按鈕時，如何在同一個組件中定位不同的反應元素，當我在 App.js 中多次重用該組件時如何工作？

我創建了一個具有 div 和一個按鈕的反應組件。 默認情況下，我通過創建“隱藏”CSS 樣式並為 div 賦予“隱藏”類來隱藏 div。 現在我想要實現的是，當我單擊按鈕時，它將調用一個函數，該函數將通過從它的 classList 中刪除隱藏類來使 div 變得可見。 我的反應組件是用類創建的，我在構造函數中綁定了“this”關鍵字。

現在我已經開始在我的 App.js 中的四個位置調用上面的可重用組件。 在組件的第一個實例上，當我單擊按鈕時，div 會按預期變為可見，但在其他情況下，當我單擊按鈕時，其他相應的 div 不會按組件實例的預期變為可見。 所以我的按鈕點擊只會影響我的反應組件的第一個實例，而其余的不會相應地采取行動。

這是我通過單擊按鈕調用的函數

handleFinish() {
        console.log("CLickedddd");
        const editBtn = document.querySelectorAll(".ResetButton");
        for (let i = 0; i < editBtn.length; i++) {
          editBtn[i].classList.remove("hidden");
        }

這是按鈕和 div：

<button id="finish" onClick={this.handleFinish}>
            Finish
          </button>
          <div style={{height: 300, width: 300, backgroundColor: "red"}} class="hidden">
            
          </div>

Answer 1

您應該使用狀態變量來控制 div 的可見性。

class App extends Component {
  constructor() {
    super();
    this.state = { hidden: false };
  }

  handleFinish = () => {
    console.log("CLickedddd");
    this.setState({ hidden: !this.state.hidden });
  };

  render() {
    return (
      <>
        <button id="finish" onClick={this.handleFinish}>
          Finish
        </button>
        <div
          style={{ height: 300, width: 300, backgroundColor: "red" }}
          className={this.state.hidden ? "hidden" : ""}
        ></div>
      </>
    );
  }
}

看到 這個沙箱

Answer 2

你可以這樣試試：

export default function App() {
  const handleFinish = () => {
    const myDiv = document.getElementById("myDiv");
    myDiv.classList.remove("hidden");
  };

  return (
    <div className="App">
      <button id="finish" onClick={handleFinish}>
        Finish
      </button>
      <div
        id="myDiv"
        style={{ height: 300, width: 300, backgroundColor: "red" }}
        className="hidden"
      ></div>
    </div>
  );
}

您可以為目標 div 分配一個 id 或 className，並且在onClick句柄上，您可以從 div 中刪除該類。

在這里，是工作代碼框。

但是，如果您想做更多類似反應的方式，比這更好，您可以為此 div 可見性創建一個狀態，然后更新該狀態以使該 div 可見。 像這樣：

export default function App() {
  const [divVisibility, setDivVisibility] = useState(false);

  const handleFinish = () => {
    setDivVisibility(true);
  };

  return (
    <div className="App">
      <button id="finish" onClick={handleFinish}>
        Finish
      </button>
      <div
        id="myDiv"
        style={{ height: 300, width: 300, backgroundColor: "red" }}
        className={divVisibility ? "" : "hidden"}
      ></div>
    </div>
  );
}

而且，這是它的沙箱。

#PS ：我使用 CSS 來hidden類，使它實際上不顯示。 我希望您使用過類似的 CSS，或者您使用過提供此類的框架。