Блог

Я просто хочу дать действие TR кнопке, но она также будет выполняться, когда я нажму Search кнопку после. Вот мой код:

 function App() {
  const [temperature, setTemperature] = useState("");
  const [city, setCity] = useState("istanbul");
  const [desc, setDesc] = useState("");
  const [name, setName] = useState("");
  const [humidity, setHumidity] = useState("");
  const [visibility, setVisibility] = useState("");
  const [windspeed, setWineSpeed] = useState("");
  const [wicon, setWicon] = useState("");
  const [lang, setLang] = useState("");
  const getWeatherData = () => {
    axios({
      method: "GET",
      url: `https://api.openweathermap.org/data/2.5/weather?q=${city}amp;appid=myapikeyamp;lang=${lang}`,
    }).then((response) => {
      setTemperature(Math.round(response.data.main.temp - 273.15));
      setDesc(response.data.weather[0].description);
      setName(response.data.name);
      setHumidity(response.data.main.humidity);
      setVisibility(response.data.visibility / 1000);
      setWineSpeed(response.data.wind.speed);
      setWicon(response.data.weather[0].icon);
      console.log(response);
    }, []);
  };
  function changeLang(){

 if("tr"){
   document.getElementById("id01").innerHTML="Nem"
   document.getElementById("id02").innerHTML="Görüş Mesafesi"
   document.getElementById("id03").innerHTML="Rüzgar Hızı"
 }
};
    
 

Я создал функцию changeLang() выше, но она немедленно меняется.
И вот мой код внутри return()

 return (
    <>
      <div class="container">
        <div class="wc">
          <div class="image">
          <div className="temp">
                {temperature}
                <span>amp;deg;</span>
              </div>
            <img
              className="weatherimg"
              alt="image1"
              src={`http://127.0.0.1:5500/src/${wicon}.svg`}
            />
          </div>
          <div class="hum-visib">
            <img
              alt="humidity1"
              className="humidityimg"
              style={{ width: "5", height: "5" }}
              src="http://127.0.0.1:5500/src/humidity.svg"
            ></img>
            <p id="id01"className="humidity">Humidity {humidity}%</p>
            <img
              alt="visibility1"
              className="visibilityimg"
              style={{ width: "5", height: "5" }}
              src="http://127.0.0.1:5500/src/visibility.svg"
            ></img>
            <div id="id02" className="visibility">
              Visibility {visibility} km
            </div>
            <img
              alt="windspeed1"
              className="windimg"
              style={{ width: "5", height: "5" }}
              src="http://127.0.0.1:5500/src/wind.svg"
            ></img>
            <div id="id03"className="windspeed">Wind Speed {windspeed} km</div>
          </div>
          <div class="input">
          <button class="trbtn" value="tr" onClick={changeLang} >TR</button>
             <button class="enbtn" onClick={(e)=> setLang(e.target.value)} value="en">EN</button>
            <form id="content" autoComplete="off">
              <input
                type="text"
                name="input"
                className="Search-box"
                onChange={(e) => setCity(e.target.value)}
              />
              <p>Your City {name}</p>
            </form>
            <button
              className="searchbtn"
              onClick={() => {
                getWeatherData(city);
              }}
            >
              Search
            </button>
             </div>
          <div className="chart">
        {/* BURASI CHART ALANI     */}
        </div>
          <div class="days">
            <div className="temp">
              {temperature}
              <span>amp;deg;</span>
            </div>
            <div id="summary">{desc}</div>
            <div className="temp">
              {temperature}
              <span>amp;deg;</span>
            </div>
            <div id="summary">{desc}</div>
            <div className="temp">
              {temperature}
              <span>amp;deg;</span>
            </div>
            <div id="summary">{desc}</div>
          </div>
        </div>
        <div class="weathercard">
          <div class="FLEXWEATHER">
            <div style={{ fontWeight: "bold", marginTop: "4px" }}>{name}</div>
          </div>
        </div>
      </div>
    </>
  );
}
 

Итак, я хочу изменить язык влажности,видимости и скорости ветра, когда я нажимаю кнопку TR, а затем нажимаю кнопку поиска.Думайте так TR , а EN кнопки есть toggle кнопки.

Вы можете создать состояние с помощью логического значения и проверить, установлено ли для турецкого значение true или false. Это вы можете переключить с помощью кнопки. Как только вы достигнете этого состояния, вы можете написать простую строку в своем коде JSX, чтобы изменить его содержимое, что-то похожее на это:

 [turkish, setTurkish] = useState(false)
 

Тогда в вашем коде JSX вы могли бы использовать

 <p id="id01"className="humidity">{turkish ? Nem : Humidity}</p>
 

Или вы могли бы даже объявить эти строки раньше, сохранив их в переменной, а затем используя переменную в коде jsx.