reactjs - 如何添加图像 src 以响应状态和设置状态
问题描述
我正在制作一个应用程序,它必然要求传递一个handleChange
on<img/>
标签以响应将image.src
on 存储到状态
import React, { Component } from 'react'
export class App extends Component {
render() {
const selectCountryChange = () => {
const img = document.querySelector('#img-country');
const select = document.querySelector('#country');
img.src = \`https://flagpedia.net/data/flags/h80/${select.selectedOptions\[0\].dataset.countrycode.toLowerCase()}.webp\`;
};
return (
<div>
<select id="country">
<option data-countryCode="IN" value="91">India</option>
<option data-countryCode="US" value="1">US</option>
<option data-countryCode="GB" value="44">UK</option>
</select>
<div class="image">
<img src="" id="img-change">
</div>
</div>
)
}
}
export default App
谁能告诉我如何添加状态管理以做出反应img.src
解决方案
当一个国家被选中时,你可以使用onChange
select 的事件来改变组件的状态。
export class App extends Component {
state={
imageSrc:'',
imageAlt:''
}
handleChange(e){
const countryCode=e.target.getAttribute('data-countryCode').toLowerCase()
this.setState({
imageSrc:'https://flagpedia.net/data/flags/h80/'+countryCode+'.webp',
imageAlt:countryCode
})
}
render() {
return (
<div>
<select id="country" onChange={this.handleChange}>
<option data-countryCode="IN" value="91">India</option>
<option data-countryCode="US" value="1">US</option>
<option data-countryCode="GB" value="44">UK</option>
</select>
<div class="image">
<img src={this.state.imageSrc} id="img-change" alt={this.state.imageAlt}/>
</div>
</div>
)
}
}
export default App;
推荐阅读
- r - XTS 不将日期时间识别为适当的基于时间的对象
- c# - 我可以知道如何修复(ASP.Net Core 3.1 App 中没有配置 XML 加密器)
- javascript - 在 for 循环的下一次迭代之前完成承诺?
- sql - 在 SQL 中使用条件设置 OPTION
- python - 查找两列python之间的百分比
- r - 如何询问清单的一部分
- css - 如何在 ionic 4 中的 shadow DOM 中添加自定义 CSS?
- javascript - 从文件夹按钮加载标题时收到错误消息
- python - 如何使用 gekko 估计 FOPDT 方程中的 theta 值?
- haskell - 在 Haskell 的 do 上下文中应用构造函数