JSX React HTML5 입력 슬라이더가 작동하지 않음

JSX React HTML5 입력 슬라이더가 작동하지 않음

리액트 쓰고 있어요.빌드용 JS로 구성 요소에 대해 두 가지 선택사항이 있는 범위 입력 슬라이더를 구축하고 있습니다.

내 코드는 다음과 같습니다.

<input id="typeinp" type="range" min="0" max="5" value="3" step="1"/>

클라이언트 측 렌더링 컴포넌트에 배치하여 전환하려고 해도 전혀 움직이지 않습니다.현재 사용하고 있는 JS/PHP 빌드로 테스트하면 정상적으로 동작합니다.

JSX/React에서는 왜 이것이 동작하지 않는가.JS와 권장되는 대처법은 무엇입니까?

감사합니다!

사용자 상호 작용은 영향을 미치지 않습니다.<input>와 함께valueprop은 통제된 것으로 간주됩니다.즉, 표시된 값은 모두 다음과 같이 제어됩니다.render기능.따라서 실제로 입력값을 업데이트하려면onChange이벤트. 예:

getInitialState: function() {
  return {value: 3};
},
handleChange: function(event) {
  this.setState({value: event.target.value});
},
render: function() {
  return (
    <input 
      id="typeinp" 
      type="range" 
      min="0" max="5" 
      value={this.state.value} 
      onChange={this.handleChange}
      step="1"/>
  );
}

를 사용할 수도 있습니다.defaultValue대신value이 경우<input>제어되지 않은 것으로 간주되며 모든 사용자 상호 작용은 호출하지 않고 요소 자체에 의해 즉시 반영됩니다.render컴포넌트의 기능.

이에 대한 자세한 내용은 공식 문서를 참조하십시오.

앞선 답변이 당신의 문제를 해결해 준다고 생각합니다.그러나 솔루션에는 React 상태가 포함되지 않아도 된다고 생각합니다.

프리즈된 입력 슬라이더의 유일한 이유는 @Colin Whitmarsh에서 알 수 있듯이 그 값을 3으로 하드코드했기 때문입니다.

간단히 말하면 다음과 같습니다.

<input id="typeinp" type="range" min="0" max="5" defaultValue="3" step="1"/>

뭔가 하기 위해서 출력이 필요할지도 모릅니다.사용할 수 있습니다.onChange={this.handleChange}@xCrZx가 그의 답변에 명시되어 있습니다.하지만 속으로는handleChange반드시 상태를 업데이트할 필요는 없습니다.논리에 따라서는 상태가 복잡해지는 것을 피할 수 있고 단순히 내부에서 논리를 코드화할 수 있습니다.handleChange.

상태 업데이트를 피하면 일부 렌더링을 저장하고 성능이 향상될 수 있습니다.

위의 솔루션으로 문제가 해결되었기를 바랍니다.후크를 사용한 간단한 접근법이 하나 있습니다.

const RangeSlider = () => {

  const [rangeval, setRangeval] = useState(null);

  return (
    <div>
      <input type="range" className="custom-range" min="199" max="3999" 
       onChange={(event) => setRangeval(event.target.value)} />
      <h4>The range value is {rangeval}</h4>
    </div>
  );
};

export default RangeSlider;

이것을 시험해 보세요.

onInput() {
    var input = document.getElementById("typeinp");
    var currentVal = input.value;
    this.setState({
      value: currentVal
    })
}

<input id="typeinp" type="range" min="0" max="5" step="1" defaultValue="3" onInput={this.onInput.bind(this)}/>

값="3"을 defaultValue="3"로 변경하는 것이 좋습니다.그렇지 않으면 값이 "3"으로 하드코드되어 변경하기 어렵거나 불가능할 수 있습니다.onInput 함수는 값을 검색하여 데이터를 다른 컴포넌트 또는 함수에 전달할 수 있도록 합니다.고객님의 문제를 보다 우아하게 해결할 수 있는 방법이 있을 것 같습니다만, 위의 방법이 효과적일 것입니다.

이벤트 핸들러가 전달된 여러 슬라이더 또는 단일 슬라이더 형식을 만드는 솔루션은 Range rc-slider 및 react-input-range don't send 이벤트핸들러의 HTML 입력을 간단하게 사용할 수 있습니다. onChange ★★★★★★★★★★★★★★★★★」onAfterChange슬라이더의 값을 암묵적으로 전송하기 때문에 슬라이더의 형태를 처리하거나 즉시 생성할 수 없습니다.

jsfiddle 스니펫

자세한 내용은 CSS-Tricks에서 제공하는HTML 입력 범위와 CSS를 확인해 주세요.

class SlidersExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      slidersLabels: ["A", "B", "C", "D"],
      sumOfCustomWeights: 0,
      slidersWeights: []
    };
  }
  componentDidMount() {
    const slidersLabels = this.state.slidersLabels;
    const slidersWeights = [];
    for (var i = 0; i < slidersLabels.length; ++i)
      slidersWeights[slidersLabels[i]] = 0;
    this.setState({ slidersWeights });
  }

  render() {
    return (
      <div>
        {this.generateSliders()}
        <span> Total Weights: {this.state.sumOfCustomWeights} </span>
      </div>
    );
  }
  generateSliders() {
    const slidersLabels = this.state.slidersLabels;
    var sliders = [];
    for (var i = 0; i < slidersLabels.length; ++i) {
      sliders.push(
        <div style={{ marginTop: "20px", marginBottom: "20px" }}>
          <span style={{ fontSize: "16px", marginBottom: "6px" }}>
            {" "}
            {slidersLabels[i]} ({this.state.slidersWeights[slidersLabels[i]]})%
          </span>
          <input
            id={slidersLabels[i]}
            type="range"
            defaultValue="0"
            min="0"
            max="100"
            className="slider"
            onChange={this.handleSliderChange.bind(this)}
            step="1"
          />
        </div>
      );
    }
     return sliders;
  }
  handleSliderChange(event) {
    //console.log(event.target.value, " ", event.target.id);
    var id = event.target.id;
    var value = event.target.value;
    const slidersWeights = this.state.slidersWeights;
    slidersWeights[id] = parseInt(value);
    var sumOfCustomWeights = 0;
    const slidersLabels = this.state.slidersLabels;
    for (var i = 0; i < slidersLabels.length; i++)
      sumOfCustomWeights += slidersWeights[slidersLabels[i]];
    this.setState({ slidersWeights, sumOfCustomWeights });
  }
}

ReactDOM.render(<SlidersExample />, document.querySelector("#app"));

input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

#app{
  margin-right: 100px;
  margin-left: 100px;
  margin-bottom: 100px;
  }

<!DOCTYPE html>
<html>
<body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"> </div>
</body>
</html>

이 솔루션은 저와 완벽하게 연동됩니다.

CodeSandbox 사용

클래스를 사용하는 경우:

class Input extends React.Component{

    // render:
    render(){
        return (
            <div className="Input">
                <input type="range" defaultValue="20000" min="0" max="100000" step="5"
                    onChange={(e) => Input.onChange(e.target.value)}
                />
            </div>
        )
    }
    
    //onChange:
    static onChange(value){
        console.log('value', value);
    }

}

언급URL : https://stackoverflow.com/questions/36122034/jsx-react-html5-input-slider-doesnt-work