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;
这是代码（大部分是不完整的）。但是我只想知道一种在单击“提交”按钮时呈现一些文本的方法。就我而言，函数 returnA（）。 这基本上是一个完全基于Web和本机 react.js 库的健康应用程序。 我想基本上清除浏览器上屏幕上的所有内容，并根据给定的条件在DOM上进行一些返回的划分。 我也想知道为什么我的代码不支持代码中给出的switch语句的在线沙箱上的if语句。 我也不想使用警报。（我知道这对我来说会更容易） 谢谢。