提交表单时向结果元素添加类[React.js]

Question

使用 React.js 创建了一个简单的 BMI 计算器。现在我正在尝试这样做，如果结果不是健康的 BMI，结果文本将被涂成红色（我正在使用样式组件）。我正在努力弄清楚应该在哪里插入它，无论是在 Form 还是 Result 元素中，以及使用什么工具（我查看了 classNames 库，但根据示例并没有真正了解如何轻松使用它）。将不胜感激任何人的帮助。 粘贴表单和结果代码，因为这是这里最有意义的。

表单元素

  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;

谢谢您的帮助。

Answer 1

您应该再添加一个 useState，例如危险状态：

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

然后，如果结果不是健康的 BMI，您将危险设置为 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 语句以相同的方式根据健康与否来选择组件。

Answer 2

首先使用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);
    }

将类作为结果组件中的 prop 传递

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