react 中文文檔案例七 (溫度計)
阿新 • • 發佈:2019-02-04
mat cto () render doc extends ont col rop
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‘) );
react 中文文檔案例七 (溫度計)