如何在 React 中显示函数的结果？

Question

我想在输入后在段落标记中显示函数的结果。这是我尝试过的：

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

只需添加一个新的状态变量：

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

使用 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;