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

【问题标题】：提交表单时向结果元素添加类 [React.js]
【发布时间】：2022-01-23 16:56:41
【问题描述】：

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

感谢您的帮助。

【问题讨论】：

标签： css reactjs styled-components classname class-names

【解决方案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 />

类似的... 如果您使用 styled-components，您可以将 prop isHealhty 传递给 result，然后使用 if 语句以相同的方式根据是否健康来选择您的组件。

【讨论】：

【解决方案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);
    }

在结果组件中将类作为道具传递

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

【讨论】：