提交表單時向結果元素添加類[React.js]

使用 React.js 創建了一個簡單的 BMI 計算器。現在我正在嘗試這樣做，如果結果不是健康的 BMI，結果文本將顯示為紅色（我正在使用樣式組件）。我正在努力弄清楚我應該在哪里嘗試插入它，無論是在 Form 還是 Result 元素中以及使用什么工具（我查看了 classNames 庫并沒有真正基于示例的想法如何輕松使用它）。將不勝感激任何人的幫助。粘貼 Form 和 Result 代碼，因為這是這里最有意義的。

表單元素

  const [height, setHeight] = useState();
  const [weight, setWeight] = useState();
  const [classification, setClassification] = useState();
  const [bmi, setBmi] = useState();

  const calculate = () => {
    const bmi = (weight / (height / 100) ** 2).toFixed(2);
    setBmi(bmi);
    if (bmi < 18.5) {
      setClassification("Underweight");
    } else if (bmi > 18.5 && bmi <= 24.9) {
      setClassification("Healthy");
    } else if (bmi > 24.9 && bmi < 30) {
      setClassification("Pre-obesity");
    } else if (bmi < 35) {
      setClassification("Obesity class I");
    } else if (bmi < 40) {
      setClassification("Obesity class II");
    } else {
      setClassification("Obesity class III");
    }
  };

  const onSubmit = (event) => {
    event.preventDefault();
    calculate();
  };

  return (
    <StyledForm onSubmit={onSubmit}>
      <Formula />
      <StyledTitle>Weight</StyledTitle>
      <StyledInput
        value={weight}
        onChange={({ target }) => setWeight(target.value)}
        required
        min={26}
        max={635}
        placeholder="Enter weight in KG"
      />
      <StyledTitle>Height</StyledTitle>
      <StyledInput
        value={height}
        onChange={({ target }) => setHeight(target.value)}
        required
        min={54}
        max={272}
        placeholder="Enter height in CM"
      />
      <Button />
      <Result bmi={bmi} classification={classification} />
    </StyledForm>
  );
};

export default Form; 

結果元素

const Result = ({ bmi, classification }) => {
  return (
    <StyledResultWrapper>
      <StyledResult>{bmi && <>Your BMI is {bmi}</>}</StyledResult>
      <StyledResult>{classification}</StyledResult>
    </StyledResultWrapper>
  );
};
export default Result;

謝謝您的幫助。

uj5u.com熱心網友回復：

您應該再添加一個 useState ，例如，危險狀態：

    const [danger, setDanger] = useState(false);

然后，如果結果不是健康的 BMI，則將 Danger 設定為 true：

    if (classification !== "Healty") {
        setDanger(true);
    } else {
        setDanger(false);
    }

最后一步是基于危險狀態的樣式：

    let component = null;
    danger 
    ? 
        component = <Result className="redStyled" ...props />
    :
        component = <Result className="healthyStyled" ...props />
    

類似的東西...如果您使用樣式組件，您可以將 prop isHealhty 傳遞給結果，然后使用 if 陳述句以相同的方式根據健康與否來選擇您的組件。

uj5u.com熱心網友回復：

首先使用 setState 創建一個類來更新代碼。

const [class, setClass] = useState(0);

在您的決定代碼中相應地設定類。您可以使用自己的代碼甚至字串，但我使用的是數字。

if (bmi < 18.5) {
      setClassification("Underweight");
      setClass(1);
    } else if (bmi > 18.5 && bmi <= 24.9) {
      setClassification("Healthy");
      setClass(2);
    } else if (bmi > 24.9 && bmi < 30) {
      setClassification("Pre-obesity");
      setClass(3);
    } else if (bmi < 35) {
      setClassification("Obesity class I");
      setClass(4);
    } else if (bmi < 40) {
      setClassification("Obesity class II");
      setClass(5);
    } else {
      setClassification("Obesity class III");
      setClass(6);
    }

在結果組件中將類作為道具傳遞

<Result bmi={bmi} classification={classification} class={class} />

現在檢查結果組件并相應地設計組件

const Result = ({ bmi, classification, class }) => {
  const styles = [{'style of 1'},{'style of 2'},{'style of 3'},{'style of 4'},{'style of 5'},{'style of 6'}];
  return (
    <StyledResultWrapper style={styles[class]}>
      <StyledResult>{bmi && <>Your BMI is {bmi}</>}</StyledResult>
      <StyledResult>{classification}</StyledResult>
    </StyledResultWrapper>
  );
};
export default Result;

標籤：css 反应 样式组件 班级名称 类名

上一篇：如何找到重復字串的數量

下一篇：邊界一直在第一線之下