Реакция звездного диапазона Функция: изображение не отображается

Question

Реакция звездного диапазона Функция: изображение не отображается

Искренне извиняюсь за тех, кто потратил время и энергию, отвечая на мой предыдущий вопрос. Я изначально предполагал, что не собираюсь получать помощь, поэтому сам начал работать над этим. Я довольно далеко, поэтому не хочу перестраивать то, что я сделал с нуля.

Этот реагирующий компонент представляет собой ряд звезд. Когда пользователь нажимает на звездочку, он и все предыдущие звезды идут от пустого до полного. Если щелкнуть звезду 2, обе звезды 1 и 2 будут заполнены и т. Д. Это ПОЛНОСТЬЮ работает. Вот мой код:

import React, { Component } from "react";

class Starset0 extends Component {



rate = event => {
    const {id} = event.target;

    console.log("You clicked: " + id);
    var i;

    for (i = 1; i < parseFloat(id) + 1; i++) { 
console.log("I should change the following: " + i);
document.getElementById(i).setAttribute("src", "{require('./full-star.png')}"); 

//okay, so you've...kinda got it working...kind of

}

  };

  render() {
    return (

        <div id = "rating0">
<img onClick = {this.rate} class = "star" id = "1" src = {require('./empty-star.png')} />
<img onClick = {this.rate} class = "star" id = "2" src = {require('./empty-star.png')} />
<img onClick = {this.rate} class = "star" id = "3" src = {require('./empty-star.png')} />
<img onClick = {this.rate} class = "star" id = "4" src = {require('./empty-star.png')}/>
<img onClick = {this.rate} class = "star" id = "5" src = {require('./empty-star.png')}/>

</div>

      );
  }
}

export default Starset0;

Проблема в том, что вместо того, чтобы звезды заполняются, они просто перестают визуализировать. Они заменяются значком, не найденным на изображении. Почему это? Если я заменил исходный атрибут вручную, он отобразит полную звезду.

javascript,jquery,html,reactjs,image,

0

Ответов: 2

JavaScript, JQuery, HTML, reactjs, образ,

Похожие вопросы

score 0 · Accepted Answer

0

Попробуйте изменить это

"{require('./full-star.png')}"

в

{require('./full-star.png')}



"{require('./full-star.png')}" is executed as string. so its not fetching the image.

score 0 · Accepted Answer

0

Оператор Externalize требует и использует его как переменную.

Попробуй это

  import React, { Component } from "react";

  class Starset0 extends Component {

    const fullStarSrc = require('./full-star.png');
    const emptyStarSrc = require('./empty-star.png');

    rate = event => {
      const { id } = event.target;

      console.log("You clicked: " + id);
      var i;

      for (i = 1; i <= 5; i++) {
        if(i <= parseInt(id)) {
          console.log("I should change the following: " + i);
          document.getElementById(i).setAttribute("src", 
  fullStarSrc);
        }
        else {
          console.log("I should change the following: " + i);
        document.getElementById(i).setAttribute("src", 
  emptyStarSrc);
        }


        //okay, so you've...kinda got it working...kind of

      }

    };

    render() {
      return (

        <div id="rating0">
          <img onClick={this.rate} class="star" id="1" src= 
 {emptyStarSrc} />
          <img onClick={this.rate} class="star" id="2" src= 
 {emptyStarSrc} />
          <img onClick={this.rate} class="star" id="3" src= 
 {emptyStarSrc} />
          <img onClick={this.rate} class="star" id="4" src= 
 {emptyStarSrc} />
          <img onClick={this.rate} class="star" id="5" src= 
 {this.emptyStarSrc} />

        </div>

      );
    }
  }

  export default Starset0;