Блог

Главная - Вопросы по программированию - Как я могу отобразить результаты функции в React?

Как я могу отобразить результаты функции в React?

#javascript #reactjs #jsx

#язык JavaScript #реагирует на #jsx

Вопрос:

Я хотел бы отобразить в теге абзаца результаты функции после ввода. Это то, что я пробовал:

 import React, { useState } from "react";  const Measurement = () =gt; { const [brightness, setBrightness] = useState(0); const [darkness, setDarkness] = useState(0);  const checkLumens = () =gt; {  if (brightness gt; 120) {  return "High";  }  if (darkness lt; 80) {  return "Low";  }   else {  return "Not Set";  } };  return ( lt;divgt;  lt;input  type="number"  onChange={(event) =gt; setBrightness(event.target.value)}  /gt;  lt;buttongt;Showlt;/buttongt;  lt;pgt;{checkLumens()}lt;/pgt; //Hide by default and show {checkLumens()} after button click   lt;/divgt;  ); };  export default Measurement;

Спасибо за помощь!

Ответ №1:

Создайте состояние для отображения и скрытия значения люмена с помощью useState и измените значение при нажатии кнопки

 const Measurement = () =gt; { const [brightness, setBrightness] = useState(0); const [darkness, setDarkness] = useState(0); const [showLumens, setShowLumnes] = useState(false); const checkLumens = () =gt; {  if (brightness gt; 120) {  return "High";  }  if (darkness lt; 80) {  return "Low";  }   else {  return "Not Set";  } };  return ( lt;divgt;  lt;input  type="number"  onChange={(event) =gt; setBrightness(event.target.value)}  /gt;  lt;button onClick={()=gt;setShowLumnes(true)}gt;Showlt;/buttongt;  {showLumens amp;amp; lt;pgt;{checkLumens()}lt;/pgt;}   lt;/divgt;  ); };  export default Measurement;

Комментарии:

1. Спасибо, что это работает! Знаете ли вы, как можно было бы сбросить все значения с помощью кнопки?

2. добавьте новую кнопку и в ее функции onClick установите значения по умолчанию для состояния. Нравится setBrightness (0); setDarkness (0); setShowLumnes (false)

3. Понятно, я попробую в этом направлении

Ответ №2:

Просто добавьте новую переменную состояния:

 import React, { useState } from "react";  const Measurement = () =gt; { const [brightness, setBrightness] = useState(0); const [darkness, setDarkness] = useState(0); const [showLumens, setShowLumens] = useState(false);  const checkLumens = () =gt; {  if (brightness gt; 120) {  return "High";  }  if (darkness lt; 80) {  return "Low";  }   else {  return "Not Set";  } };  return ( lt;divgt;  lt;input  type="number"  onChange={(event) =gt; setBrightness(event.target.value)}  /gt;  lt;button onClick={() =gt; setShowLumens(true)}gt;Showlt;/buttongt;  lt;pgt;{showLumens ? checkLumens() : null}lt;/pgt; //Hide by default and show {checkLumens()} after button click   lt;/divgt;  ); };  export default Measurement;

Ответ №3:

 import React, { useState, useEffect } from "react";  const Measurement = () =gt; { const [brightness, setBrightness] = useState(0); const [darkness, setDarkness] = useState(0); const [lumens, setLumens] = useState('Not Set') const [show, setShow] = useState(false)  useEffect(() =gt; {  if (brightness gt; 120) {  setLumens("High");  }  if (darkness lt; 80) {  setLumens("Low");  }   else {  setLumens("Not Set");  } }, [darkness, brightness])  return ( lt;divgt;  lt;input  type="number"  onChange={(event) =gt; setBrightness(event.target.value)}  /gt;  lt;button onClick={() =gt; setShow(true)}gt;Showlt;/buttongt;  lt;pgt;{show amp;amp; lumens}lt;/pgt; //Hide by default and show {checkLumens()} after button click   lt;/divgt;  ); };  export default Measurement;
Метки: