Как я могу заставить все буквы верхнего регистра с помощью TextField? Структура пользовательского интерфейса Office

В следующем коде я пытаюсь получить TextField с надписью «Описание», чтобы текст был полностью заглавным. Я добавил код handleChange, но каждый раз, когда я пытаюсь ввести в поле, моя форма зависает. Как я могу заставить это TextField быть заглавными буквами? Есть ли другой способ сделать это, кроме onChange? Могу ли я сделать это TextField всеми буквами верхнего регистра без использования onChange?

import * as React from "react";
import { Stack } from 'office-ui-fabric-react';
import { TextField} from 'office-ui-fabric-react/lib/TextField';
import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';

export interface DimInspectionProps {

}

export default class DimInspection extends React.Component<DimInspectionProps> {

  handleChange(event) {  
    this.setState({value: event.target.value.toUpperCase()}); //trying to make them Upper Case
  }
  render() {

    const levelOptions: IDropdownOption[] = [
        { key: '1', text: '1' },
        { key: '2', text: '2' },
        { key: '3', text: '3' },
        { key: '4', text: '4' },
        { key: '5', text: '5' },
        { key: '6', text: '6' }
      ]
    return (
      <div>
      <Stack horizontal tokens={{ childrenGap: 5 }} styles={{ root: { width: 350 } }}>
        <Dropdown
                label="Level"
                key="levelKey"
                options={levelOptions}
                styles={{ root: { width: 50 } }}
            />
            <TextField 
                label="Description"
                styles={{ root: { width: 245 } }}
                onChange={this.handleChange.bind(this)}  //here is where I am trying to handle the Change
            />
      </Stack>
      <Stack horizontal tokens={{ childrenGap: 5 }} styles={{ root: { width: 350 } }}>
      <TextField 
                label="Setup Time"
                styles={{ root: { width: 95 } }}
                defaultValue={'1'}
                suffix="hour(s)"
                disabled={false}
            />
            <TextField 
                label="Run Time"
                suffix="min(s)"
                styles={{ root: { width: 100 } }}
            />
            <TextField 
                label="Contingency"
                suffix="%"
                styles={{ root: { width: 95 } }}

            />
      </Stack>
      <Stack horizontal tokens={{ childrenGap: 5 }} styles={{ root: { width: 350 } }}>
        <TextField 
                label="Total Tooling"
                styles={{ root: { width: 100 } }}
        />
        <TextField 
                label="Comments"
                styles={{ root: { width: 195 } }}
        />
      </Stack>
      </div>

    );

  }
}

После помощи rfestag вот окончательный ответ

import * as React from "react";
import { Stack } from 'office-ui-fabric-react';
import { TextField} from 'office-ui-fabric-react/lib/TextField';
import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';

export interface ITextFieldControlledExampleState {
  value: string;
}
export default class TextFieldControlledExample extends React.Component<{}, ITextFieldControlledExampleState> {

  public state: ITextFieldControlledExampleState = { value: '' };

  render() {
    this.handleChange = this.handleChange.bind(this);
    const levelOptions: IDropdownOption[] = [
        { key: '1', text: '1' },
        { key: '2', text: '2' },
        { key: '3', text: '3' },
        { key: '4', text: '4' },
        { key: '5', text: '5' },
        { key: '6', text: '6' }
      ]
    return (
      <div>
      <Stack horizontal tokens={{ childrenGap: 5 }} styles={{ root: { width: 350 } }}>
        <Dropdown
                label="Level"
                key="levelKey"
                options={levelOptions}
                styles={{ root: { width: 50 } }}
                onChange={this.handleChange.bind(this)}
            />
            <TextField 
                label="Description"
                styles={{ root: { width: 245 } }}
                onChange={this.handleChange}
                value={this.state.value}
            />
      </Stack>
      <Stack horizontal tokens={{ childrenGap: 5 }} styles={{ root: { width: 350 } }}>
      <TextField 
                label="Setup Time"
                styles={{ root: { width: 95 } }}
                defaultValue={'1'}
                suffix="hour(s)"
                disabled={false}
            />
            <TextField 
                label="Run Time"
                suffix="min(s)"
                styles={{ root: { width: 100 } }}
            />
            <TextField 
                label="Contingency"
                suffix="%"
                styles={{ root: { width: 95 } }}

            />
      </Stack>
      <Stack horizontal tokens={{ childrenGap: 5 }} styles={{ root: { width: 350 } }}>
        <TextField 
                label="Total Tooling"
                styles={{ root: { width: 100 } }}
        />
        <TextField 
                label="Comments"
                styles={{ root: { width: 195 } }}
        />
      </Stack>
      </div>

    );
  }
  handleChange(event) {
    this.setState({value: event.target.value.toUpperCase()});
  }
}