javascript - 如果选中复选框，如何防止组件更新

Question

一位客户想要一个数字 slider 组件，让他可以选择一个数字，以及一个显示“无值”的复选框。选中该复选框后， slider 应被禁用，但仍应保留其先前选择的配置。

我在使用具有 props 和状态的组件的惯用 React 方式实现这个时遇到了麻烦。

我将两者设想为单个组件的一部分，一个 slider 复选框，具有如下 Prop :

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

现在，如果选中无值 复选框，则值 未定义。问题在于，因为 value 还设置了 slider 的位置，这意味着一旦复选框被勾选，位置就会改变——我不希望这种情况发生。

问题在于，虽然 React 希望保持所有组件同步，但在这种情况下，我们不想让 slider 与应用程序的其余部分保持同步。即使 value 应该是 undefined(或 null)，我们仍然希望 slider 位于用户选择的最后一个值上。

解决这个问题的正确方法是什么？

Answer 1

我不知道你的应用程序逻辑是如何工作的，因为你还没有分享它，但是你可以使用 shouldComponentUpdate() 来解决这个问题。

If shouldComponentUpdate returns false, then render() will be completely skipped until the next state change. In addition, componentWillUpdate and componentDidUpdate will not be called.

所以你可以这样做:

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，因为变量实际上已定义，但没有任何值。

请注意，这不会按照您的要求禁用 slider - 它只会保持 slider 的原始渲染状态。

---

如果您还想在选中复选框时禁用 slider ，我认为这里有几个选项。这是一个:

将组件拆分为 2 个子组件

这里的想法是 Prop 直接控制 slider 和复选框，而不使用 state。如果您想使用 Stateless Functional Components，这很好，请查看我的指南，了解如何以及为何使用它。

Demo

所以你的代码应该是这样的:

复选框 slider :

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;

slider :

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;