reactjs - 使用 reactjs 动态渲染图像
问题描述
在 reactjs 中动态渲染图像.... 我想要做的是当用户在我的下拉菜单中选择一个新团队时动态更改图像。
<Col xs="6">
<Label for="name"><h2> Home Team </h2> </Label>
<Input type="select" name="homeTeam" id="exampleSelect" onChange={this.handleChange}>
<option>Utah Jazz</option>
<option>Houston Rockets</option>
<option>Cleveland Cavaliers</option>
<option>Boston Celtics</option>
<option>Golden State Warriors</option>
<option>Los Angeles Lakers</option>
</Input>
我试图通过使用如下状态来做到这一点:
<Img src={require(this.state.homeImage)} width="100" height="50"/>
或者
<Img src={require(this.state.homeImage)} width="100" height="50"/>
但我要么得到一个错误说
找不到模块“。”
或者
这是保留字
分别。
以下是我的组件的代码。我将不胜感激有关如何解决此问题的任何意见或有关如何使相同功能起作用的任何新想法!谢谢!
import React, { Component } from 'react';
import axios from 'axios';
import { Button, Form, FormGroup, Label, Input, FormText, Row, Col, Container, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import ReactDOM from 'react-dom';
import Img from 'react-image'
import 'bootstrap/dist/css/bootstrap.min.css';
import Carousel1 from './HomeCarousel.js';
import Carousel2 from './AwayCarousel.js';
import './nba.css';
import nbaLogo from '../../images/nbaLogo.jpg';
class HomeTeamSelector extends Component {
constructor(props) {
super(props)
this.state = {
// homeTeam: '',
// awayTeam: '',
homeTeam: 'Jazz',
awayTeam: 'Jazz',
homeImage: '../../images/nbaLogo.jpg',
awayImage: 'nbaLogo',
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount(){
// this.setState({
// homeImage: 'nbaLogo',
// })
this.state.homeImage = '../../images/nbaLogo.jpg';
// console.log('homeImage: ', this.state.homeImage);
var image = '../../images/nbaLogo.jpg';
console.log('image: ',image);
}
handleChange = e => {
// this.setState({
// [e.target.name]: e.target.value,
// homeImage: '../../images/nbaLogo.jpg',
// })
this.state.homeImage = '../../images/nbaLogo.jpg';
console.log('handle change homeImage: ',this.state.homeImage);
const image = this.state.homeImage
console.log('image is: ', image);
this.state.homeImage = image;
}
async handleSubmit(e, activeIndex) {
e.preventDefault()
// const { homeTeam } = this.state
const teams = {
// homeTeam: this.state.homeTeam,
// awayTeam: this.state.awayTeam,
homeTeam: this.state.homeTeam,
awayTeam: this.state.awayTeam,
}
const form = await axios.post('/api/form', {teams});
}
render() {
return (
<div className="pickerDiv">
<img src={nbaLogo} width="100" height="50" />
<Img src={require(this.state.homeImage)} width="100" height="50"/> /// <--- this is the line that i am referring to in my post.
<p> {this.state.homeImage} </p>
<h1> {this.state.homeTeam} -vs- {this.state.awayTeam} </h1>
<Form className="emailForm" onSubmit={this.handleSubmit} style={{ width: '600px'}}>
<FormGroup id="formElement">
<div id="test">
<Container>
<Row>
<Col xs="6">
<Label for="name"><h2> Home Team </h2> </Label>
<Input type="select" name="homeTeam" id="exampleSelect" onChange={this.handleChange}>
<option>Utah Jazz</option>
<option>Houston Rockets</option>
<option>Cleveland Cavaliers</option>
<option>Boston Celtics</option>
<option>Golden State Warriors</option>
<option>Los Angeles Lakers</option>
</Input>
</Col>
<Col xs="6">
<Label for="name"><h2> Away Team </h2> </Label>
<Input type="select" name="awayTeam" id="exampleSelect" onChange={this.handleChange}>
<option>Utah Jazz</option>
<option>Houston Rockets</option>
<option>Cleveland Cavaliers</option>
<option>Boston Celtics</option>
<option>Golden State Warriors</option>
<option>Los Angeles Lakers</option>
</Input>
</Col>
</Row>
</Container>
</div>
</FormGroup>
<Button color="primary">Send</Button>
</Form>
</div>
);
}
}
export default HomeTeamSelector;
解决方案
您可以根据状态传递带有图像的对象,但首先必须使用昵称导入,如下所示:
import foo from '../images/foo.jpg';
import bar from '../images/bar.jpg';
因此,根据您的状态,您可以执行以下操作:
class HomeTeamSelector extends Component {
constructor(props) {
super(props)
this.state = {
homeTeam: 'Jazz',
awayTeam: 'Jazz',
switchImage: false,
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange = e => {
this.setState({
switchImage: true,
})
}
render() {
const { swichtImage } = this.state;
const imagePassedDown = if(switchImage) {
return foo;
} else if(!switchImage) {
return bar;
}
};
return (
<div className="pickerDiv">
<img src={imagePassedDown} width="100" height="50"/>
<p> {this.state.homeImage} </p>
<h1> {this.state.homeTeam} -vs- {this.state.awayTeam} </h1>
<form className="emailForm" onSubmit={this.handleSubmit} style={{ width: '600px'}}>
);
}
}
export default HomeTeamSelector;
基本上我正在做的是传递一个对象,该对象对图像的引用将根据状态而有所不同(即:每次单击某物时它都会改变)。这是基本的想法希望它有所帮助:)
推荐阅读
- asp.net - 导出 Web 部件功能不会创建 .WebPart 文件
- python - 将数组附加到列表
- node.js - Post 请求中的参数
- c# - 如何为 Azure Compute 的 C# 客户端指定过滤器?
- java - 哪种方法更适合将微服务应用程序迁移到云端?Kubernetes、AWS Lambda等如何选择?
- github - 在 Github 中查看/恢复待处理的代码审查
- vhdl - 在 VHDL 中乘以浮点和整数文字
- excel - 如果满足条件,用于复制和粘贴特定单元格的 VBA 代码
- class - 模板类中的模板函数“在此上下文中是私有的”错误
- javascript - 如何在 TypeScript 中键入重载箭头函数的参数?