Question

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

意思是如果我的值是123.45，并且我要删除4个字符到12，然后再添加4个字符得出124.56，我不希望状态更改为12，从而使所有其他数字都跳起来。

onEnter上有吗？还是应该捕获每个字符并检查是否已输入？

ps。在取消编辑更多的TextField后提交该怎么办？

Answer 1

您当然可以使用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)
    }
  }
}

不使用onChange而是使用Enter设置TextField的值

1 个答案: