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调用，并且尝试使用按钮和道具，但是我无法使其正常工作。

我想使用Toggle开关从华氏温度更改为摄氏温度。

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时，它将以华氏温度渲染温度，否则将以摄氏温度渲染。

希望这会有所帮助！

Answer 2

从您的app.js组件中，将温度变化回调处理程序传递给<Weather />组件-像这样：

class App extends Component {
   constructor(props) {
     super(props);
     // Keeping it Celcius by default
     this.state = {
       temperatureUnit: "C"
     }
   }

   onTemperatureChange = temperature => {
     this.setState({
       temperatureUnit
     }, () => {
       // If you have a API call to make, this is place.
     });
   }

   render() {
     return <Weather temperatureUnit={this.state.temperatureUnit} onTemperatureChange={this.onTemperatureChange} />
   }
}

从“天气”组件中，将其向下传递到“切换”组件。

{props.id && props.country && <Toggle temperatureChanged={props.onTemperatureChanged} />}

别忘了根据显示的温度单位来计算值。

<div className={Styles.outputData}>
   {props.temperature && (
     <div className={Styles.outputTitle}>
        Temperature
        <p className={Styles.outputResult}>
           {props.temperatureUnit === "C"
              ? `${props.tempC} °C`
              : `${props.tempF}F`}
        </p>
     </div>
   )}
</div>

在切换组件中跟踪开关的变化。

const Toggle = props => {
  return (
    <label className={Styles.switchWrap}>
      <input
        onChange={event =>
          event.target.checked
            ? props.temperatureChanged("F")
            : props.temperatureChanged("C")
        }
        type="checkbox"
      />
      <div className={Styles.switch} />
    </label>
  );
};

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

2 个答案: