react 中文文档案例七 (温度计)
发布时间:2020-12-15 20:35:02 所属栏目:百科 来源:网络整理
导读: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 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 ‘‘; } 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>; } class TemperatureInput extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); } handleChange(e) { this.props.onTemperatureChange(e.target.value); } render() { const temperature = this.props.temperature; const scale = this.props.scale; return ( <fieldset> <legend>Enter temperature in {scaleNames[scale]}:</legend> <input value={temperature} 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); this.state = {temperature: ‘‘,scale: ‘c‘}; } handleCelsiusChange(temperature) { this.setState({scale: ‘c‘,temperature}); } handleFahrenheitChange(temperature) { this.setState({scale: ‘f‘,temperature}); } render() { const scale = this.state.scale; const temperature = this.state.temperature; const celsius = scale === ‘f‘ ? tryConvert(temperature,toCelsius) : temperature; const fahrenheit = scale === ‘c‘ ? tryConvert(temperature,toFahrenheit) : temperature; return ( <div> <TemperatureInput scale="c" temperature={celsius} onTemperatureChange={this.handleCelsiusChange} /> <TemperatureInput scale="f" temperature={fahrenheit} onTemperatureChange={this.handleFahrenheitChange} /> <BoilingVerdict celsius={parseFloat(celsius)} /> </div> ); } } ReactDOM.render( <Calculator />,document.getElementById(‘root‘) ); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- fastjson排序问题-如何改变fastjson的排序规则
- 编写uboot下Nor Flash驱动的注意事项
- ruby – 带括号和没有括号的方法调用的优先级是什么?
- c – 我可以使用互锁操作来更新多个值以避免锁定关键部分/互
- Magento获取用户登录状态及登录用户信息 /页面加载 XML 文件
- c – 用于基于密钥访问的订购数据的STL容器?
- Every derived table must have its own alias
- Swift hitTest(_ point: CGPoint, with event: UIEvent?) -
- Cocos2D-Android-1之源码详解:1.Cocos2D
- 正则表达式 – 匹配字符串:和空格