Встроенный стиль в реакции (прогресс Progressbar) - PullRequest
Новая
       6

Встроенный стиль в реакции (прогресс Progressbar)

0 голосов
/ 23 февраля 2019

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

Любая помощь или советы, которые я могу получить, будут очень полезныоценили!Вот код для компонента: 

  constructor(props) {
    super(props);

    this.state = {
      arrIterator: 0,
      counter: 0,
      sets: props.ids.sets,
      exercises: props.program,
      ids: props.ids
    }

    // Helper variable to decide when a new round starts --> Reset counter
    this.newRoundOn = ((this.state.exercises.length /this.state.sets) -1);

    // Gets percentage for progressbar
    let barPercentage = ((this.state.arrIterator / this.state.exercises.length) * 100) +"%";

    this.style = {
      width: {barPercentage} 
    }
  }

  // Renders Progress Bar
  renderProgressBar() {
    return(
      <div className="card-panel" id="progresjon-panel">
      <div className="row">
          <h5 className="col s8">Progresjon</h5>
          <h5 className="col s4 right-align">{this.state.arrIterator +1} / {this.state.exercises.length}</h5>
      </div>
      <div className="progress" style={style}>
          <div className="determinate"></div>
      </div>
  </div>
    );
  }

1 Ответ

0 голосов
/ 23 февраля 2019

Вы должны изменить свое состояние, чтобы индикатор выполнения изменил свое значение.Проверьте, изменилось ли какое-либо свойство с помощью метода componentDidUpdate, а затем установите новое значение barPercentage:

В качестве небольшого совета, вам следует избегать передачи реквизитов в состояние . 

constructor () {
   this.state = {
     barPercentage: 0
   } 
}

componentDidUpdate (prevProps) {
  // Helper variable to decide when a new round starts --> Reset counter
  this.newRoundOn = ((this.props.exercises.length /this.props.sets) -1);

  // Gets percentage for progressbar
  let barPercentage = (this.props.arrIterator / this.props.exercises.length) * 100;

  if (this.props.arrIterator > prevProps.arrIterator) {
    this.setState({ barPercentage })
  }
}

render () {
  return (
    // [...]
    <div className="progress" style={{ width: `${this.state.barPercentage}%` }}>
      <div className="determinate"></div>
    </div>
    // [...]
  )
}
...