Question

如果用户键入的值小于min，我正在尝试将HTML5数字输入值的值设为等于min。但是，该函数失败，因为我的两个parseFloats返回NaN（并且它们肯定不应该 - 当我使用debugger时，我可以在控制台中访问这两个参数。）

componentDidMount() {
  const autocorrect = this.props.autoCorrect; // true
  this.inputNode.addEventListener('blur', (e) => {
    const value = parseFloat(this.value); // NaN ?
    const minimum = parseFloat(this.min); // NaN ?
    if (this.props.autoCorrect && (value < minimum)) {
      this.value = minimum;
    }
  });
}


render() {
  return (
    <input
      ref={(input) => {
        this.inputNode = input;
      }}
      type='number'
      min={this.props.min}
      value={this.props.value}
    />
  );
}

事实上，如果我使用debugger停止该功能，我可以使用this.value = 23强制输入的值进行更改。那么我在功能中忽略了什么呢？

Answer 1

箭头函数未定义自己的上下文 - this中的(e) => {...}与调用componentDidMount的conext相同。

parseFloat在附加到ref的componentDidMount函数中返回NaN

1 个答案: