input-number
input-number copied to clipboard
使用无状态组件 props.value 改变了 InputNumber 并不会更新
"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() + ""}后,会立即更新,但是每次更新都会失焦
在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
});
}