Установка значения TextField без onChange, но с помощью Enter

Question

Я использую https://developer.microsoft.com/en-us/fabric в бухгалтерском программном обеспечении. Я бы хотел, чтобы TextField изменил значение состояния только после нажатия Enter, чтобы промежуточный результат не изменил состояние.

То есть, если у меня было значение 123,45, и я удаляю 4 символа в 12, а затем добавляю 4, в результате чего получается 124,56, я не хочу, чтобы состояние менялось на 12, заставляя все остальные числа прыгать.

Есть ли на Enter? или я должен захватить каждый символ и проверить, если он входит?

пс. как насчет отправки на деактивацию 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)
    }
  }
}