我希望我的切换按钮将所有摄氏温度切换为华氏温度,但我不知道如何在这个特定的应用程序中执行此操作。摄氏温度是通过 axios 调用在状态中定义的:
class App extends Component {
state = {
temperature: undefined,
然后我就有了天气组件:
const Weather = props => {
let tempC = props.temperature;
let tempF = (props.temperature * 9) / 5 + 32;
return (
<div className={Styles.outputs}>
{props.id && props.country && (
<div className={Styles.fontIcon}>
<i className={`owf owf-${props.id}`} />
</div>
)}
{props.city && props.country && (
<h2 className={Styles.outputCity}>
{props.city}, {props.country}
</h2>
)}
{props.main && props.description && (
<div className={Styles.outputDesc}>
{props.main}/{props.description}
</div>
)}
{props.id && props.country && <Toggle />}
<div className={Styles.outputDatas}>
<div className={Styles.outputData}>
{props.temperature && (
<div className={Styles.outputTitle}>
Temperature
<p className={Styles.outputResult}>{props.temperature}°C</p>{" "}
</div>
)}
</div>
<div className={Styles.outputData}>
{props.wind && (
<div className={Styles.outputTitle}>
Wind
<p className={Styles.outputResult}>{props.wind} m/s</p>
</div>
)}
</div>
<div className={Styles.outputData}>
{props.humidity && (
<div className={Styles.outputTitle}>
Humidity
<p className={Styles.outputResult}>{props.humidity}%</p>
</div>
)}
</div>
</div>
</div>
);
};
我尝试过针对不同的温度发出两个不同的 axios 调用,并且我尝试使用按钮和 Prop ,但我无法使其工作。
我想使用切换开关将华氏温度更改为摄氏温度。
const Toggle = () => {
return (
<label className={Styles.switchWrap}>
<input type="checkbox" />
<div className={Styles.switch} />
</label>
);
};
最佳答案
首先,您需要记录切换按钮的状态,以便您可以相应地在温度之间切换。比如,
state = { toggleOn: false }; //true when button is checked
然后,将 {props.Temperature}°C
替换为 { this.state.toggleOn ? tempF+'°F' : tempC+°C }
当toggleOn为true时,它将以华氏度呈现温度,否则以摄氏度呈现。
希望这有帮助!
关于javascript - 如何使用 React 实现切换按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56102241/