代码之家 › 专栏 › 技术社区 › kirill_igum jfriend00

设置文本字段的值,不更改,但使用Enter

office-ui-fabric

0

kirill_igum jfriend00 · 技术社区 · 6 年前

我在用 https://developer.microsoft.com/en-us/fabric#/components/textfield 在会计类软件中。我希望textfield只在按下enter后更改状态值,这样中间结果就不会更改状态。

也就是说,如果我有一个值123.45,我将删除4个字符到12,然后添加4,得到124.56,那么我不希望状态更改为12,从而使所有其他数字都跳起来。

有一个中心吗?还是应该捕获每个字符并检查它是否输入?

ps.关于从“更多编辑”中取消激活文本字段的提交?

1 回复 | 直到 6 年前

1

Micah Godbolt 6 年前

您当然可以使用onkeypress,然后通过引用获取当前值。

当输入值通过状态更改时,您还可以跟踪输入值,然后在输入时同步状态。不管怎样。

https://codepen.io/micahgodbolt/pen/Ydxjdz?editors=1011

class TextFieldBasicExample extends React.Component<any, any> {
  
  field = React.createRef();
  
  public render(): JSX.Element {
    return (
      <div className="docs-TextFieldExample">
        <TextField componentRef={this.field} label="Standard" onKeyPress={this.handleKeyPress} />
      </div>
    );
  }
  
  handleKeyPress = (event, value) => {
    if(event.key == 'Enter'){
      console.log(this.field.current.value)
    }
  }
}