React找坑篇—不受控制的input-number

发表于 | 评论数： | 阅读次数：
input-number失效，输入值和state不符，找找原因 ->

问题

一次写业务需求的时候，需要自己写一个input-number组件。这个input-number允许用户输入，将输入转为数字后重新展示。

于是马上写了一版：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 组件
class InputNumber extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      val: 0
    }
    this.changeVal = this.changeVal.bind(this)
  }
  changeVal(e) {
    this.setState({
      val: parseInt(e.target.value)
    })
  }
  render() {
    return (
      <input type="number" value={this.state.val}
        onChange={this.changeVal}
      />
    )
  }
}

但发现在给input-number输入”01”后，显示居然没有变成”1”

为什么会出现这种情况？你能猜到原因吗？

调试

经过对setState的学习，我们知道更新时，会调用_updateRenderedComponent方法，我们在这打上断点，看下后面都发生了什么。

进过一番折腾，终于找到input更新dom的地方了

调用栈
调用栈

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
 * Updates a DOM component after it has already been allocated and
 * attached to the DOM. Reconciles the root DOM node, then recurses.
 *
 * @param {ReactReconcileTransaction} transaction
 * @param {ReactElement} prevElement
 * @param {ReactElement} nextElement
 * @internal
 * @overridable
 */
updateComponent: function (transaction, prevElement, nextElement, context) {
  var lastProps = prevElement.props;
  var nextProps = this._currentElement.props;
  switch (this._tag) {
    case 'input':
      lastProps = ReactDOMInput.getHostProps(this, lastProps);
      nextProps = ReactDOMInput.getHostProps(this, nextProps);
      break;
    // ...
  }
  assertValidProps(this, nextProps);
  this._updateDOMProperties(lastProps, nextProps, transaction);
  this._updateDOMChildren(lastProps, nextProps, transaction, context);
  switch (this._tag) {
    case 'input':
      // Update the wrapper around inputs *after* updating props. This has to
      // happen after `_updateDOMProperties`. Otherwise HTML5 input validations
      // raise warnings and prevent the new value from being assigned.
      ReactDOMInput.updateWrapper(this);
      // We also check that we haven't missed a value update, such as a
      // Radio group shifting the checked value to another named radio input.
      inputValueTracking.updateValueIfChanged(this);
      break;
    // ...
  }
},

获取到新旧两个props后，会更新dom属性，我们的值不同，很可能是这里出的问题

我们进入_updateDOMProperties看看它是如何更新属性的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 _updateDOMProperties: function (lastProps, nextProps, transaction) {
  var propKey;
  var styleName;
  var styleUpdates;
  // ...
  for (propKey in nextProps) {
    var nextProp = nextProps[propKey];
    var lastProp = propKey === STYLE ? this._previousStyleCopy : lastProps != null ? lastProps[propKey] : undefined;
    if (!nextProps.hasOwnProperty(propKey) || nextProp === lastProp || nextProp == null && lastProp == null) {
      continue;
    }
    // ...
    if (DOMProperty.properties[propKey] || DOMProperty.isCustomAttribute(propKey)) {
      var node = getNode(this);
      // If we're updating to null or undefined, we should remove the property
      // from the DOM node instead of inadvertently setting to a string. This
      // brings us in line with the same behavior we have on initial render.
      if (nextProp != null) {
        DOMPropertyOperations.setValueForProperty(node, propKey, nextProp);
      } else {
        DOMPropertyOperations.deleteValueForProperty(node, propKey);
      }
    }
  }
  if (styleUpdates) {
    CSSPropertyOperations.setValueForStyles(getNode(this), styleUpdates, this);
  }
},

在调试时，我们仅需关注value，发现这里对value的主要处理为

1
2
3
4
5
6
7
8
9
 var node = getNode(this);
// If we're updating to null or undefined, we should remove the property
// from the DOM node instead of inadvertently setting to a string. This
// brings us in line with the same behavior we have on initial render.
if (nextProp != null) {
  DOMPropertyOperations.setValueForProperty(node, propKey, nextProp);
} else {
  DOMPropertyOperations.deleteValueForProperty(node, propKey);
}

继续追踪，函数执行到DOMPropertyOperations.setValueForProperty

是不是有点紧张，越来越接近答案了

辗转又进入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
DOMMutationMethods: {
  value: function (node, value) {
    if (value == null) {
      return node.removeAttribute('value');
    }
    // Number inputs get special treatment due to some edge cases in
    // Chrome. Let everything else assign the value attribute as normal.
    // https://github.com/facebook/react/issues/7253#issuecomment-236074326
    if (node.type !== 'number' || node.hasAttribute('value') === false) {
      node.setAttribute('value', '' + value);
    } else if (node.validity && !node.validity.badInput && node.ownerDocument.activeElement !== node) {
      // Don't assign an attribute if validation reports bad
      // input. Chrome will clear the value. Additionally, don't
      // operate on inputs that have focus, otherwise Chrome might
      // strip off trailing decimal places and cause the user's
      // cursor position to jump to the beginning of the input.
      //
      // In ReactDOMInput, we have an onBlur event that will trigger
      // this function again when focus is lost.
      node.setAttribute('value', '' + value);
    }
  }

走到这，这里的node.ownerDocument.activeElement 等于 node，并没有去重置node的value值，而原因在注释中说明

don’t operate on inputs that have focus, otherwise Chrome might strip off trailing decimal places and cause the user’s cursor position to jump to the beginning of the input.

“不要对具有焦点的输入进行操作，否则Chrome可能会脱离尾随小数位并导致用户的光标位置跳转到输入的开头。”

这里没有去更新input的值，那有别的地方处理吗？

这段注释下面还有一句

In ReactDOMInput, we have an onBlur event that will trigger this function again when focus is lost.

说的是失去焦点时，会重新触发这个操作。

回到updateComponent方法，关于input，它还有一部分操作

1
2
3
4
5
6
7
8
9
10
case 'input':
  // Update the wrapper around inputs *after* updating props. This has to
  // happen after `_updateDOMProperties`. Otherwise HTML5 input validations
  // raise warnings and prevent the new value from being assigned.
  ReactDOMInput.updateWrapper(this);
  // We also check that we haven't missed a value update, such as a
  // Radio group shifting the checked value to another named radio input.
  inputValueTracking.updateValueIfChanged(this);
  break;

看看wrapper里有没有对此input更新

1
2
3
4
5
6
7
8
9
10
11
12
13
var value = LinkedValueUtils.getValue(props);
// ...
var valueAsNumber = parseFloat(node.value, 10) || 0;
if (
// eslint-disable-next-line
value != valueAsNumber ||
// eslint-disable-next-line
value == valueAsNumber && node.value != value) {
    // Cast `value` to a string to ensure the value is set correctly. While
    // browsers typically do this as necessary, jsdom doesn't.
    node.value = '' + value;
}

注意到这里node.value 为 “01” 而 value为 1

而 “01” == 1，因此这里也没有更新，晕！

终于找着了罪魁祸首，这是不是React的bug呢？准备提一个issue去。

解决

方案一：手动更新

在componentDidUpdate里，我们去操作真实dom的value值

方案二：避免字符串与数字比较

可以将相关的state 改为string 类型