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

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

0 голосов
/ 23 декабря 2018

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

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

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

пс.как насчет отправки на деактивацию TextField из редактирования больше?

1 Ответ

0 голосов
/ 27 декабря 2018

Вы, конечно, можете использовать 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)
    }
  }
}
...