蚂蚁设计模糊方法用于输入数组件

Question

我想使用Blur方法运行一个函数，如果InputNumber组件丢失了焦点，但是我不知道如何使用它。

<InputNumber
value={value}
onChange={this.handleChange}
onKeyDown={this.onKeyHandler}
size="small"
min={0}
step={0.5}
/>

Answer 1

您可以尝试一下。

 <InputNumber
    value={value}
    onChange={this.handleChange}
    onKeyDown={this.onKeyHandler}
    size="small"
    min={0}
    step={0.5}
    ref={(input) => this.testInput = input}
    />

然后在componentdidupdate之类的生命周期方法中

 this.testInput.focus();
 this.testInput.blur();

Answer 2

尝试这种方式它可以正常工作。;(

<InputNumber
    value={value}
    onChange={this.handleChange}
    onKeyDown={this.onKeyHandler}
    size="small"
    min={0}
    step={0.5}
    onFocus={this.showValue}
    onBlur={this.showValue}
    />

Answer 3

您可以使用onBlur方法并在event.target.value中获取值。

onBlurHandler = e => {
  const { value } = e.target;
  console.log(value) // entered value when input out focused
  // your logic
}
<InputNumber
  value={value}
  onChange={this.handleChange}
  onKeyDown={this.onKeyHandler}
  onBlur={this.onBlurHandler}
  size="small"
  min={0}
  step={0.5}
/>