チェックボックスがチェックされている場合、コンポーネントが更新されないようにする方法

Question

クライアントは数値を選択できる数値スライダーコンポーネントと「値なし」というチェックボックスを必要とします。チェックボックスをオンにすると、スライダは無効にする必要がありますが、以前に選択した構成を保持する必要があります。

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

私はトラブル慣用的に使用して、これを実装することだ小道具や状態を持っているコンポーネントの、ように反応します。

私はこのような小道具で、単一コンポーネント、スライダー、チェックボックスの一部として2を想定しています：値なしチェックボックスがチェックされている場合

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

は今、そしてvalueは未定義です。問題は、valueもスライダの位置を設定するため、チェックボックスがオンになったら位置が変更されることを意味します。

問題は、Reactがすべてのコンポーネントを同期させたままにしたい場合です。この場合、スライダをアプリケーションの残りの部分と同期させたくありません。 valueはundefined（またはnull）であるにもかかわらず、ユーザーが最後に選択した値にスライダーを置きたいと考えています。

この問題を解決する正しい方法は何ですか？

Answer 1

あなたのアプリケーションロジックがどのように機能するのか分かりませんが、共有していないので、shouldComponentUpdate()を使ってこの問題を解決できます。

shouldComponentUpdate戻りfalse場合、render()は完全に次の状態変化までスキップされます。さらに、componentWillUpdateおよびcomponentDidUpdateは呼び出されません。

だから、あなたができる：

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

valueが定義されていない場合、これは再レンダリングからコンポーネントを防ぐことができます。私は代わりにnullで送信することをお勧めしますが、変数は実際には定義されていますが、単に値がないためです。

これはではありません。は、要求したとおりにスライダを無効にします。スライダの元のレンダリング状態を維持するだけです。

---

チェックボックスをオンにしてもスライダを無効にしたい場合は、ここでいくつかのオプションがあります。ここでは1です：

スプリット2サブコンポーネントへのコンポーネント

ここでの考え方はstateを使用せずに、小道具が直接スライダとチェックボックスを制御することです。 Stateless Functional Componentsを使用する場合は、これを使用する方法とその理由についてのガイドをご覧ください。

Demo

だからあなたのコードは次のようなものになるだろう：

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; 

チェックボックス：

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>