javascript - 如何使用 React 实现切换按钮？

Question

我希望我的切换按钮将所有摄氏温度切换为华氏温度，但我不知道如何在这个特定的应用程序中执行此操作。摄氏温度是通过 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>
  );
};

Answer 1

首先，您需要记录切换按钮的状态，以便您可以相应地在温度之间切换。比如，

state = { toggleOn: false }; //true when button is checked

然后，将 {props.Temperature}°C 替换为 { this.state.toggleOn ? tempF+'°F' : tempC+°C }

当toggleOn为true时，它将以华氏度呈现温度，否则以摄氏度呈现。

希望这有帮助!