Question

动态渲染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>

我试图通过使用state来做到这一点：

<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;

Answer 1

您可以根据状态传递带有图像的对象，但首先必须使用昵称导入，如下所示：

User

因此，根据您的州，您可以执行以下操作：

_id

基本上我正在做的是传递一个对象，其中引用的图像将根据状态而不同（即：每次点击某些内容时它都会改变）。这是基本的想法，希望它有所帮助：）

使用reactjs动态渲染图像

1 个答案: