Javascript estB； }; returnC=（）=>{ 返回

testC

； }; 条件=（）=>{ //在这里做你的事 如果（条件A）{ 返回这个； }否则如果（条件B）{ 返回这个； }否则{ 返回这个。returnC（）； } }; render（）{ 返回( {/*更新show值，可以添加更多逻辑*/} this.setState（prev=>（{show:！prev.show}））}> 提交 {/*如果show为true，则使用条件或不显示*/} {show？this.conditional（）：} ); } }

---

最好删除不必要的代码，并将其限制为仅解决问题的代码

import React from "react";

class Input extends React.Component {
  constructor() {
    super();
    this.state = {
      phone: "",
      weight: "",
      height: "",
      gender: "",
      smoke: "",
      lazy: "",
      bmi: "",
      pain: "",
      systolicbp: ""
    };
  }

  returnA = () => {
    return (
      <div>
        {`You do not have diabetes.
         You're good to go.
         Stay fit.`}
      </div>
    );
  };

  returnB = () => {
    return (
      <div>
        {`You might have a slight chance of diabetes.
         We'd recommend you to consult a doctor.`}
      </div>
    );
  };

  returnC = () => {
    return (
      <div>
        {`You have a high chance of diabetes.
         We'd recommend you to consult a doctor immediately.`}
      </div>
    );
  };

  returnD = () => {
    return (
      <div>
        {`You must consult a doctor immediately.
         We'd recommend you to stay healthy and eat good food.`}
      </div>
    );
  };

  handleClick = () => {
    const bmi = this.state.bmi;
    const weight = this.state.weight;
    const height = this.state.height;
    const gender = this.state.gender;
    const smoke = this.state.smoke;
    const lazy = this.state.lazy;
    const pain = this.state.pain;
    const systolicbp = this.state.systolicbp;
    switch (height) {
      case height >= 76:
        switch (weight) {
          case weight > 159 && weight <= 197:
            this.setState({ bmi: "norm" });
            break;
          case weight > 197 && weight <= 238:
            this.setState({ bmi: "over" });
            break;
          case weight > 238 && weight <= 320:
            this.setState({ bmi: "obe" });
            break;
          case weight > 320:
            this.setState({ bmi: "sobe" });
            break;
          default:
            console.log("Unspecific Value");
        }
        break;
      default:
        console.log(height.value);
        break;
    }
    switch (bmi) {
      case "norm":
        switch (smoke) {
          case "yes":
            console.log("Yes");
            break;
          case "no":
            switch (pain) {
              case "yes":
                switch (systolicbp) {
                  case systolicbp <= 140:
                    this.returnA();
                    break;
                  case systolicbp > 140:
                    this.returnB();
                    break;
                  default:
                    console.log("Unexpected Error");
                    break;
                }
                break;
              case "no":
                console.log("NO");
                break;
              default:
                console.log("Unexpected Error");
                break;
            }
            break;
          default:
            console.log("Unexpected Error");
        }
        break;
      case "over":
        break;
      case "obe":
        break;
      case "sobe":
        break;
      default:
        console.log(bmi.value);
        break;
    }
  };

  setGenderMale = () => {
    this.setState({ gender: "male" });
  };

  setGenderFemale = () => {
    this.setState({ lazy: "female" });
  };

  setPainYes = () => {
    this.setState({ pain: "yes" });
  };

  setPainNo = () => {
    this.setState({ pain: "no" });
  };

  setSmokeYes = () => {
    this.setState({ smoke: "yes" });
  };

  setSmokeNo = () => {
    this.setState({ smoke: "no" });
  };

  setLazyLazy = () => {
    this.setState({ lazy: "lazy" });
  };

  setLazyActive = () => {
    this.setState({ lazy: "active" });
  };

  componentDidMount() {
    this.setState({
      phone: document.getElementById("phone").value,
      weight: document.getElementById("weight").value,
      height: document.getElementById("height").value,
      gender: document.getElementById("gender").value,
      smoke: document.getElementById("smoke").value,
      lazy: document.getElementById("lazy").value,
      pain: document.getElementById("pain").value,
      systolicbp: document.getElementById("sbp").value
    });
  }

  render() {
    return (
      <div className="Input">
        <form>
          <br />
          <br />
          {`Phone Number: `}{" "}
          <input id="phone" type="tel" onChange={this.handleChange} />
          <br />
          <br />
          {`Weight: `}{" "}
          <input
            id="weight"
            type="number"
            min="0"
            onChange={this.handleChange}
          />
          {`(In pounds)`}
          <br /> <br />
          {`Height: `}{" "}
          <input id="height" type="number" onChange={this.handleChange} />
          {`(In Inches)`}
          <br />
          <br />
          <div>
            {`Painstatus: `}{" "}
            <input
              type="radio"
              id="pain"
              name="pain"
              value="yes"
              onChange={this.handleChange}
            />
            {`Yes`}
            <input
              type="radio"
              id="pain"
              name="pain"
              value="no"
              onChange={this.handleChange}
            />
            {`No`}
            <br />
            <br />
          </div>
          <div>
            {`Gender: `}{" "}
            <input
              type="radio"
              id="gender"
              name="gender"
              value="male"
              onChange={this.handleChange}
            />
            {`Male`}
            <input
              type="radio"
              id="pain"
              name="gender"
              value="female"
              onChange={this.handleChange}
            />
            {`Female`}
            <br />
            <br />
          </div>
          <div>
            {`Do you smoke ? `}{" "}
            <input
              type="radio"
              id="smoke"
              name="smoke"
              value="yes"
              onChange={this.handleChange}
            />
            {`Yes`}
            <input
              type="radio"
              id="smoke"
              name="smoke"
              value="no"
              onChange={this.handleChange}
            />
            {`No`}
            <br />
            <br />
          </div>
          <div>
            {`How lazy are you ? `}{" "}
            <input
              type="radio"
              id="lazy"
              name="activity"
              value="lazy"
              onChange={this.handleChange}
            />
            {`Lazy`}
            <input
              type="radio"
              id="lazy"
              name="activity"
              value="active"
              onChange={this.handleChange}
            />
            {`Active`}
            <br />
            <br />
          </div>
          <br />
          {`Systolic Blood Pressure: `}{" "}
          <input id="sbp" type="number" min="0" onChange={this.handleChange} />
          <br />
          <br />
          <br /> <br />
          <button
            type="submit"
            onClick={this.handleClick}
            className="btn btn-outline-dark"
          >
            Submit
          </button>
        </form>
      </div>
    );
  }
}

export default Input;

import React from 'react';

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
  }

  returnA = () => {
    return <p>testA</p>;
  };

  returnB = () => {
    return <p>testB</p>;
  };

  returnC = () => {
    return <p>testC</p>;
  };

  conditional = () => {
    // Do your stuff here
    if (conditionA) {
      return this.returnA();
    } else if (conditionB) {
      return this.returnB();
    } else {
      return this.returnC();
    }
  };

  render() {
    return (
      <div>
        {/* update the show value, you can add more logic */}
        <button onClick={() => this.setState(prev => ({ show: !prev.show }))}>
          submit
        </button>
        {/* if show is true then we use conditional or we show nothing */}
        {show ? this.conditional() : <></>}
      </div>
    );
  }
}