平时在写原声js项目的时候,我们经常会遇到函数的封装,但是突然之间,迁移到react上来,却有点不知所措,今天查了一些资料,找到一个很经典的例子,来解释说明react函数体的封装,以及state状态的唯一性
// 引入React
import React, { Component} from 'react';
import ReactDOM from 'react-dom';
//新建一个对象,并定义两个函数toCelsius和toFahrenheit
const scaleNames = {
c: 'Celsius',
f: 'Fahrenheit'
};
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5 / 9;
}
function toFahrenheit(celsius) {
return (celsius * 9 / 5) + 32;
}
//定义函数tryConvert并传入两个参数,一个数input的值value,一个是将上面定义的两个函数作为参数的convert
function tryConvert(value, convert) {
const input = parseFloat(value);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
//定义一个组件
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>;
}
//定义一个input的基本组件
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.props.onChange(e.target.value);
}
render() {
const value = this.props.value;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input value={value}
onChange={this.handleChange} />
</fieldset>
);
}
}
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
//默认状态,一定注意,这里是数据的唯一来源并且setstate也必须是这里面的数据
this.state = {
value: '',
scale: 'c'
};
}
//将‘scale’置为c,value等于value
handleCelsiusChange(value) {
this.setState({
scale: 'c',
value: value
});
}
//将‘scale’置为c,value等于value
handleFahrenheitChange(value) {
this.setState({
scale: 'f',
value: value
});
}
render() {
const scale = this.state.scale;
const value = this.state.value;
//为scaleNames两个字符串赋值
//定义函数tryConvert并传入两个参数,一个数input的值value,一个为形参convert传入toCelsius函数作为实参,一个为形参传入toFahrenheit函数作为实参
const celsius = scale === 'f' ? tryConvert(value, toCelsius) : value;
const fahrenheit = scale === 'c' ? tryConvert(value, toFahrenheit) : value;
// 渲染TemperatureInput组件的时候,将value的值设置为celsius和fahrenheit,
return (
<div>
<TemperatureInput
scale=""
value={celsius}
onChange={this.handleCelsiusChange} />
<TemperatureInput
scale=""
value={fahrenheit}
onChange={this.handleFahrenheitChange} />
<BoilingVerdict
celsius={parseFloat(celsius)} />
</div>
);
}
}
ReactDOM.render(
<Calculator />,
document.getElementById('root')
);
利用state中value作为中转,然后经过转换,为全局定义的scaleNames赋值,保证了数据的唯一来源