提交表单 [React.js] 时将 class 添加到结果元素

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，您将 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 语句以相同的方式 select 您的组件基于健康与否。

Answer 2

首先创建一个class使用setState来更新代码。

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

在您的决定代码中相应地设置 class。您可以使用自己的代码甚至字符串，但我使用的是数字。

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

将 class 作为结果组件中的 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;

提交表单 [React.js] 时将 class 添加到结果元素

Adding class to result element when submitting form [React.js]

css

reactjs

styled-components

classname

class-names