單擊 Reactjs 時如何更改大小框？

Question

我想更改 div 元素“Container-2”的高度大小。 因此，當我單擊按鈕組件並獲得 value = 10 時，“Container-2”的高度將變為 100px，之前為 50px。

應用程序.js

import React from 'react';
import Tugas9 from './tugas9/tugas9';

const App = () => {
  return (
    <>
      <Tugas9/>
    </>
  );
}

export default App;

tugas9.js

import React from "react";
import { useState } from "react";
import './Tugas9.css';

function Tugas9 () {
    const [angka, setAngka] = useState(1);
    const increment = () => {
        setAngka(angka +1);
    }

    return (
        <div className="Container-2">
            <div className="App-2">
                <p>{angka}</p>
                <button onClick={increment}>Tambah</button>
                {angka >= 10 ? <span>State count sudah lebih dari 10!!</span> : null}
            </div>
        </div>
    )
}

export default Tugas9;

CSS

.Container-2 {
    width: 800px;
    height: 50px;
    border-radius: 8px;
    box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.5);
    -webkit-box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.5);
    margin: auto;
    margin-top: 100px;
    padding: 30px;
  }

  .App-2 p {
    margin-top: 0;
    text-align: center;
  }
  
  .App-2 button {
    padding: 5px 375px;
    margin: 0 auto;
  }

  .App-2 span {
    display: block;
    margin-top: 10px;
  }

我嘗試了很多方法，但仍然沒有奏效。 我也是 React JS 的初學者:)

Answer 1

你聽說過useEffect()鈎子嗎？ 它允許您在您的應用程序中響應 state 的更改。

以下是它如何解決您的問題。 首先，將盒子的高度定義為 state：

const [boxHeight, setBoxHeight] = useState(50)

然后使用內聯樣式來定義框的高度：

<div className="Container-2" style={{height: `${boxHeight}px`}}>
...

現在，我們需要做的最后一件事是在angka state 超過10時更改高度。 讓我們使用useEffect()鈎子來實現它：

useEffect(() => {
  if (angka >= 10) {
    setBoxHeight(100)
  }
}, [angka])

如果您不熟悉useEffect()鈎子，請務必閱讀官方文檔。