在没有 onChange 但有 Enter 的情况下设置 TextField 的值

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，然后通过 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)
    }
  }
}

在没有 onChange 但有 Enter 的情况下设置 TextField 的值

Setting the value of a TextField without onChange but with Enter

office-ui-fabric