확인란을 선택하면 구성 요소가 업데이트되지 않도록 방지하는 방법

Question

클라이언트는 숫자를 선택할 수있는 숫자 슬라이더 구성 요소를 원하고 '값 없음'확인란을 선택합니다. 확인란을 선택하면 슬라이더가 비활성화되어 있어야하지만 이전에 선택한 구성이 유지되어야합니다. 나는 문제가 관용적를 사용하여이를 구현하는 데 문제가

http://image.prntscr.com/image/4efc55b8d11a40749bb1e44c4287a709.png

소품과 상태를 가지고 구성 요소의, 방법을 반응한다.

이 같은 소품, 단일 구성 요소, 슬라이더 - 체크 박스의 일환으로 두 가지를 상상 해요 :

value : number 
onChange : (newValue : number) => void 

을 이제 값 확인란이 선택되지 않는 경우, 다음 value는 정의되어 있지 않습니다 . 문제는 value도 슬라이더의 위치를 ​​설정하기 때문에 확인란을 선택하고 나면 위치가 변경된다는 것을 의미하므로 문제가 발생하지 않습니다.

문제는 React가 모든 구성 요소를 동기화 상태로 유지하려고하지만이 경우 슬라이더를 나머지 응용 프로그램과 동기화하지 않으려는 경우입니다. value은 undefined (또는 null)이어야하지만 사용자가 선택한 마지막 값에 슬라이더를 올려 놓기를 원합니다.

이 문제를 해결하기위한 올바른 방법은 무엇입니까?

Answer 1

공유하지 않았기 때문에 응용 프로그램 논리가 어떻게 작동하는지 모르지만 shouldComponentUpdate()을 사용하여이 문제를 해결할 수 있습니다.

반환 false shouldComponentUpdate 경우, render() 완전히 될 다음 상태 변화까지 생략됩니다. 또한 componentWillUpdate 및 componentDidUpdate는 호출되지 않습니다.

그래서 당신은 할 수 : value가 정의되지 않은 경우

shouldComponentUpdate(nextProps) { 
    if(typeof nextProps.value === 'undefined') return false; //return false if value is undefined 
    return true; //otherwise always return true (this is default) 
} 

이 다시 렌더링에서 구성 요소를 방지 할 수 있습니다. 비록 내가 변수 null 대신에 보내는 것을 제안 할지라도, 변수는 실제로 정의되었지만 단순히 값이 없기 때문에.

아니요,은 요청한대로 슬라이더를 사용 중지합니다. 슬라이더의 원래 렌더링 상태를 그대로 유지합니다.

---

확인란을 선택했을 때 슬라이더를 사용 중지하려면 여기에서 몇 가지 옵션을 선택하십시오. 여기에 하나는 다음과 같습니다

분할이 하위 구성 요소

여기에서 아이디어 소품이 state를 사용하지 않고, 직접 슬라이더와 체크 박스를 제어하는 ​​것입니다에 구성 요소입니다. Stateless Functional Components을 사용하려면이 방법을 사용하는 이유 및 사용 가이드를 확인하십시오.

CheckboxSlider :

class CheckboxSlider extends React.Component { 

    constructor(props, context) { 
    super(props, context); 
    this.state = { 
     value: 50, //default is in the middle, 50% 
     disabled: false 
    }; 
    } 

    _toggleSlider =() => { 
    this.setState({disabled: !this.state.disabled}); 
    } 

    render() { 
    <div> 
     <Slider value={this.state.value} disabled={this.state.disabled} /> 
     <CheckBox onCheckboxChange={this._toggleSlider} /> 
    </div> 
    } 
} 

export default CheckboxSlider; 

슬라이더 :

import React from 'react'; 

const Slider = (props) => (
    <input id="slider" type="range" min="0" max="100" disabled={props.disabled} /> 
); 

export default Slider; 

Demo

그래서 코드는 다음과 같을 것확인란 :

import React from 'react'; 

const Checkbox = (props) => (
    <input id="checkbox" type="checkbox" onChange={props.onCheckboxChange} /> 
); 

export default Checkbox; 

Answer 2

를 사용하여 별도의 상태는 활성화/슬라이더를 사용하지 않고/체크의 체크 박스를 체크 해제하기 위해, 슬라이더 입력의 값을 가질 수 있습니다. 다음은 샘플 스 니펫입니다.

class Slider extends React.Component { 
 

 
    constructor(props) { 
 
    super(props) 
 
    this.state = { 
 
     sliderValue: 100, 
 
     checkedValue: false, 
 
     enable: false 
 
    } 
 
    } 
 
    handleChange= (e) => { 
 
    this.setState({sliderValue: e.target.value}); 
 
    } 
 
    handleClick = (e) => { 
 
    if(this.state.checkedValue == false) { 
 
     this.setState({checkedValue: true, enable: true}, function() { 
 
      this.refs.slider.disabled = true; 
 
     }.bind(this)); 
 
    } else if(this.state.checkedValue == true) { 
 
     this.setState({checkedValue: false, enable: false}); 
 
    } 
 
    } 
 
    render() { 
 
    return (
 
     <div> 
 
     <input type="range" ref="slider" value={this.state.sliderValue} onChange={this.handleChange} min="100" max="500" step="10" disabled={this.state.enable}/> 
 
     <input type="checkbox" onChange={this.handleClick} /> 
 
     </div> 
 
    ) 
 
    } 
 

 
} 
 

 
ReactDOM.render(<Slider />, document.getElementById('app'));

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