input-number icon indicating copy to clipboard operation
input-number copied to clipboard

使用无状态组件 props.value 改变了 InputNumber 并不会更新

Open buffge opened this issue 6 years ago • 1 comments

"antd": "^3.24.2" "react": "^16.9.0"

import { InputNumber } from "antd"
import { InputNumberProps } from "antd/lib/input-number"
import React from "react"
interface Props {
  span: number
  offset: number
  spanOnChange: InputNumberProps["onChange"]
  offsetOnChange: InputNumberProps["onChange"]
}

export default function ColGrid(props: Props) {
  const { span, offset, spanOnChange, offsetOnChange } = props
  return (
    <div style={{ marginBottom: 15 }}>
      <div style={{ marginBottom: 5, color: "#333", fontWeight: 600 }}>
        设置显示样式(列栅格布局:24)
      </div>
      <div className="flex alignItemsCenter" style={{ marginTop: 5 }}>
        <div style={{ marginRight: 8 }}>span</div>
        <InputNumber
          //  key={new Date() + ""}
          value={span}
          onChange={spanOnChange}
        />
      </div>
      <div className="flex alignItemsCenter" style={{ marginTop: 5 }}>
        <div style={{ marginRight: 8 }}>offset</div>
        <InputNumber value={offset} onChange={offsetOnChange} />
      </div>
    </div>
  )
}

当props 中span 更新的时候,InputNumber还是上一次的值,但是当我给InputNumber 加上 key={new Date() + ""}后,会立即更新,但是每次更新都会失焦

buffge avatar Oct 24 '19 10:10 buffge

在es/index.js 84-99行 因为pressingUpOrDown==undefined 并且 this.inputting == true ,所以值并不会更新上去, 请问这个判断是为了什么效果

if (prevProps.value !== value) {
     var validValue = focused ? value : this.getValidValue(value);
     var nextInputValue = void 0;
     if (this.pressingUpOrDown) {
       nextInputValue = validValue;
     } else if (this.inputting) {
       nextInputValue = this.rawInput;
     } else {
       nextInputValue = this.toPrecisionAsStep(validValue);
     }

     this.setState({ // eslint-disable-line
       value: validValue,
       inputValue: nextInputValue
     });
   }

buffge avatar Oct 25 '19 02:10 buffge