用reactjs动态呈现图像

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

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

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;

基本上，我所做的是传递一个对象，该对象的引用将根据不同的状态而有所不同(即:每次单击某物时它都会改变)。这就是希望能有所帮助的基本想法:)