ReactJS如何为TR按钮绑定动作 实现点击Search后触发语言切换

解决方案 #

你可以通过状态驱动渲染的逻辑实现需求，无需直接操作DOM，修改步骤如下：

1. 调整语言按钮逻辑，删除原有的changeLang函数，让TR按钮和EN按钮统一仅修改lang状态，点击时不立即更新界面文本
2. 把静态的标签文本改为根据lang状态动态渲染，语言切换会在下次界面更新时生效
3. 点击Search按钮调用getWeatherData时，会自动携带当前选中的lang参数请求接口，请求完成后界面会同步更新为对应语言的内容

关键代码修改

首先修改语言按钮部分：

<button class="trbtn" value="tr" onClick={(e)=> setLang(e.target.value)} >TR</button>
<button class="enbtn" value="en" onClick={(e)=> setLang(e.target.value)} >EN</button>

然后修改信息展示部分的文本渲染逻辑：

<p id="id01" className="humidity">{lang === 'en' ? 'Humidity' : 'Nem'} {humidity}%</p>
<div id="id02" className="visibility">
  {lang === 'en' ? 'Visibility' : 'Görüş Mesafesi'} {visibility} km
</div>
<div id="id03" className="windspeed">{lang === 'en' ? 'Wind Speed' : 'Rüzgar Hızı'} {windspeed} km</div>

额外优化点：

• 你当前getWeatherData的then回调后误写了空数组[]，属于语法错误，请删除该空数组
• 状态定义中setWineSpeed拼写错误，建议改为setWindspeed和变量名保持一致
• 可以给lang状态设置初始值'en'，避免首次加载时语言为空

修改后逻辑：点击TR/EN按钮仅更新语言状态，点击Search按钮后才会带着选中的语言请求新数据，同时界面文本同步切换为对应语言。

内容的提问来源于stack exchange，提问作者Batuhan Can