Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React状态提示代码示例
// 温度常量标量名
const scaleNames = {
c: "Celsius",
f: "Fahrenheit"
};
// 温度单位转换计算
function toCelsius(fahrenheit) {
return ((fahrenheit - 32) * 5) / 9;
}
function toFahrenheit(celsius) {
return (celsius * 9) / 5 + 32;
}
// 温度转换;第一个参数是接收温度数值,第二个参数是接收转换函数
function tryConvert(temperature, convert) {
const input = parseFloat(temperature);
if (Number.isNaN(input)) {
return "";
}
// 一开始这里的convert不知道有什么作用,后来才知道cover是接收转换函数,也就是toCelsius和toFahrenheit
const output = convert(input);
// console.log(output, output);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
// 是否是开水
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>水开了</p>;
}
return <p>水还没有沸腾</p>;
}
// 温度输入框-01
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
// 调用父组件的handleCelsiusChange方法。而handleCelsiusChange方法是由父组件内的this.handleCelsiusChange提供的。
// 而this.handleCelsiusChange是保存数据的作用,最终该数据会被tryConvert()方法调用,来做温度单位转换
this.props.onTemperatureChange(e.target.value);
// console.log(e.target.value)
}
render() {
// 接收传递来的温度数值
const temperature = this.props.temperature;
// 接收温度标识符。如c或者f。C是摄氏度,F是华氏度
const scale = this.props.scale;
// 输入框,带有onChange处理函数
return (
<fieldset>
<legend>请输入温度 / {scaleNames[scale]}</legend>
<input value={temperature} onChange={this.handleChange} />
</fieldset>
);
}
}
// 计算者-02
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
this.state = { temperature: "", scale: "" };
}
// 保存 摄氏度 数据
handleCelsiusChange(temperature) {
console.log(temperature);
this.setState({ scale: "c", temperature });
}
// 保存 华氏度 数据
handleFahrenheitChange(temperature) {
this.setState({ scale: "f", temperature });
}
// 渲染页面 DOM
render() {
// 页面初始值
const scale = this.state.scale;
const temperature = this.state.temperature;
// 如果是f,就调用tryConvert()
const celsius =
scale === "f" ? tryConvert(temperature, toCelsius) : temperature;
const fahrenheit =
scale === "c" ? tryConvert(temperature, toFahrenheit) : temperature;
// 返回两个输入框和一个文本提示框到dom内
return (
<div>
{/*
传入摄氏度
传入摄氏度函数
*/}
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={this.handleCelsiusChange}
/>
<TemperatureInput
scale="f"
temperature={fahrenheit}
onTemperatureChange={this.handleFahrenheitChange}
{...console.log(this.handleFahrenheitChange)}
/>
<BoilingVerdict celsius={parseFloat(celsius)} />
</div>
);
}
}
// ReactDOM.render(<TemperatureInput />, document.getElementById("root"));
ReactDOM.render(<Calculator />, document.getElementById("root"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.