如何在 React 中顯示 function 的結果？

Question

我想在輸入后在段落標簽中顯示 function 的結果。 這是我嘗試過的：

import React, { useState } from "react";

const Measurement = () => {
const [brightness, setBrightness] = useState(0);
const [darkness, setDarkness] = useState(0);

const checkLumens = () => {
   if (brightness > 120) {
     return "High";
   }
   if (darkness < 80) {
     return "Low";
   } 
   else {
     return "Not Set";
   }
};

return (
<div>
  <input
    type="number"
    onChange={(event) => setBrightness(event.target.value)}
  />
  <button>Show</button>
  <p>{checkLumens()}</p> //Hide by default and show {checkLumens()} after button click 
 </div>
 );
};

export default Measurement;

謝謝您的幫助！

Answer 1

只需添加一個新的 state 變量：

import React, { useState } from "react";

const Measurement = () => {
const [brightness, setBrightness] = useState(0);
const [darkness, setDarkness] = useState(0);
const [showLumens, setShowLumens] = useState(false);

const checkLumens = () => {
   if (brightness > 120) {
     return "High";
   }
   if (darkness < 80) {
     return "Low";
   } 
   else {
     return "Not Set";
   }
};

return (
<div>
  <input
    type="number"
    onChange={(event) => setBrightness(event.target.value)}
  />
  <button onClick={() => setShowLumens(true)}>Show</button>
  <p>{showLumens ? checkLumens() : null}</p> //Hide by default and show {checkLumens()} after button click 
 </div>
 );
};

export default Measurement;

Answer 2

 import React, { useState, useEffect } from "react"; const Measurement = () => { const [brightness, setBrightness] = useState(0); const [darkness, setDarkness] = useState(0); const [lumens, setLumens] = useState('Not Set') const [show, setShow] = useState(false) useEffect(() => { if (brightness > 120) { setLumens("High"); } if (darkness < 80) { setLumens("Low"); } else { setLumens("Not Set"); } }, [darkness, brightness]) return ( <div> <input type="number" onChange={(event) => setBrightness(event.target.value)} /> <button onClick={() => setShow(true)}>Show</button> <p>{show && lumens}</p> //Hide by default and show {checkLumens()} after button click </div> ); }; export default Measurement;

Answer 3

創建一個 state 以使用 useState 顯示和隱藏流明值，並在單擊按鈕時更改值

const Measurement = () => {
const [brightness, setBrightness] = useState(0);
const [darkness, setDarkness] = useState(0);
const [showLumens, setShowLumnes] = useState(false);
const checkLumens = () => {
   if (brightness > 120) {
     return "High";
   }
   if (darkness < 80) {
     return "Low";
   } 
   else {
     return "Not Set";
   }
};

return (
<div>
  <input
    type="number"
    onChange={(event) => setBrightness(event.target.value)}
  />
  <button onClick={()=>setShowLumnes(true)}>Show</button>
  {showLumens && <p>{checkLumens()}</p>} 
 </div>
 );
};

export default Measurement;