Блог

Я довольно новичок в React и пытаюсь понять, как добавить небольшую функцию, которая поможет мне создать компонент слайдера. В настоящее время я использую getElementById и onInput . Я нашел похожие вопросы, но все они ссылаются onClick на события, которые я не пытаюсь делать. Надеюсь, я здесь не так уж далек! Любая помощь приветствуется. Вот соответствующие части моего кода:

HTML:

 <div id="root"></div>
  

CSS:

 #myinput {
  background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
  border: solid 1px #82CFD0;
  border-radius: 8px;
  height: 7px;
  width: 356px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}
  

JS(Babel):

 class VolumeSlider extends React.Component {
  constructor() {
    super();
    this.state = {
      value: 120.5
    };
  }

  onUpdate(e) {
    this.setState({
      value: e.target.value
    });
  }

document.getElementById("myinput").oninput = function() {
  this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 '   this.state.value   '%, #fff '   this.state.value   '%, white 100%)'
};

  render() {
    return (
      <div className="mb1">
        <input
          className="c-input--range"
          list="tickmarks"
          max={1200}
          onChange={(e) => this.onUpdate(e)}
          step={0.1}
          type="range"
          value={this.state.value}
        />
        <div>
           <label className="c-label">{this.state.value}c</label>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <VolumeSlider />
  </div>,
  document.getElementById("root")
);
  

Спасибо!

По какой-либо причине вы не используете ту же логику, что и раньше onUpdate ?

 onInput(e){
  e.target.style.background = 'linear-gradient(to right, #82CFD0 0%,  #82CFD0 '   this.state.value   '%, #fff '   this.state.value   '%, white 100%)';
}
  

 class VolumeSlider extends React.Component {
  constructor() {
    super();
    this.state = {
      value: 120.5
    };
  }

  onUpdate(e) {
    this.setState({
      value: e.target.value
    });
  }
 
  onInput(e){
    const gradStart = (this.state.value/e.target.max/2)*100;
    const gradEnd = (this.state.value/e.target.max)*100;
    e.target.style.background = 'linear-gradient(to right, #82CFD0 0%,  #82CFD0 '   gradStart   '%, #fff '   gradEnd   '%, white 50%)';
  }
  
  render() {
    return (
      
      <div className="mb1">
        <input
          className="c-input--range"
          id="myinput"
          list="tickmarks"
          max={1200}
          onChange={(e) => this.onUpdate(e)}
          onInput={(e) => this.onInput(e)}
          step={0.1}
          type="range"
          value={this.state.value}
        />
        <div>
           <label className="c-label">{this.state.value}c</label>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <VolumeSlider />
  </div>,
  document.getElementById("root")
);  

 #myinput {
  background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #eee 50%, #eee 100%);
  border-radius: 8px;
  height: 7px;
  width: 356px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.4.2/react-dom.min.js"></script>
<div id="root"></div>