작성
·
652
0
안녕하세요 12강 실습코드를 그대로 작성했는데 섭씨온도를 적었을때 화씨온도로 자동으로 변환되어 나타나지 않습니다. 화씨온도를 먼저 적었을때도 마찬가지고요. 코드 한번 봐주실 수 있나요? 감사합니다.
Calculator
import React, {useState} from "react";
import TemperatureInput from "./Temperatureinput";
function BoilingVerdict(props){
if(props.celsius >= 100){
return <p>물이 끓습니다.</p>;
}
return <p>물이 끓지 않습니다.</p>;
}
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 Calculator(props){
const [temperature, setTemperature] = useState("");
const[scale,setScale]=useState("c");
const handleCelsiusChange = (temperature) => {
setTemperature(temperature);
setScale("c");
};
const handleFahrenheitChange = (temperature) => {
setTemperature(temperature);
setScale("f");
};
const celsius =
scale === "f" ? tryConvert(temperature, toCelsius):temperature;
const fahrenheit =
scale === "c" ? tryConvert(temperature, toFahrenheit):temperature;
return (
<div>
<TemperatureInput scale="c"
temperatrue = {celsius}
onTemperatureChange={handleCelsiusChange}/>
<TemperatureInput scale="f"
temperatrue = {fahrenheit}
onTemperatureChange={handleFahrenheitChange}/>
<BoilingVerdict celsius={parseFloat(celsius)} />
</div>
);
}
export default Calculator;
Temperatureinput
const scaleNames = {
c:'섭씨',
f:'화씨',
};
function TemperatureInput(props){
const handleChange = (event) => {
props.onTemperatureChange(event.target.value);
};
return (
<fieldset>
<legend>
온도를 입력해주세요(단위:{scaleNames[props.scale]});
</legend>
<input value={props.temperature} onChange={handleChange} />
</fieldset>
);
}
export default TemperatureInput;
답변 1
0
안녕하세요, 소플입니다.
Calculator
컴포넌트에서 TemperatureInput
컴포넌트를 사용하는 부분에서 props
를 넣어줄 때 공백이 들어가면 안 됩니다.
아래와 같이 수정해서 한 번 해보시고 그래도 안되면 다시 댓글 남겨주시기 바랍니다!
<div>
<TemperatureInput
scale="c"
temperatrue={celsius}
onTemperatureChange={handleCelsiusChange} />
<TemperatureInput
scale="f"
temperatrue={fahrenheit}
onTemperatureChange={handleFahrenheitChange} />
<BoilingVerdict celsius={parseFloat(celsius)} />
</div>
감사합니다.