时间戳

首页 > 解决方案 > 在没有 onChange 但使用 Enter 的情况下设置 TextField 的值

office-ui-fabric - 在没有 onChange 但使用 Enter 的情况下设置 TextField 的值

问题描述

我在会计类软件中使用https://developer.microsoft.com/en-us/fabric#/components/textfield 。我希望 TextField 仅在按 Enter 后更改状态值，以便中间结果不会更改状态。

这意味着如果我有一个值 123.45，并且我将 4 个字符删除到 12，然后添加 4 导致 124.56，我不希望状态更改为 12 使所有其他数字跳跃。

有onEnter吗？或者我应该捕获每个字符并检查它是否输入？

附言。从编辑中提交停用 TextField 怎么样？

标签： office-ui-fabric

解决方案

您当然可以使用 onKeyPress，然后通过 ref 获取当前值。

您还可以在输入值通过状态更改时跟踪它，然后在输入时同步状态。无论哪种方式。

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)
    }
  }
}

推荐阅读