Как я могу заставить все заглавные буквы с TextField? Офисный пользовательский интерфейс Fabric

Question

В следующем коде я пытаюсь получить 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()});
  }
}

Answer 1

По сути, проблема, вероятно, в том, что this.state не определено. Вам нужно либо инициализировать его в конструкторе, либо добавить его до того, как будет определена ваша функция рендеринга:

export class TextFieldControlledExample extends React.Component<{}, ITextFieldControlledExampleState> {

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

Более подробную информацию об управляемых компонентах с этой библиотекой можно найти здесь: https://developer.microsoft.com/en-us/fabric# / controls / web / textfield

Кроме того, в настоящее время у вас нет контролируемого компонента (что означает, что вы не контролируете значение). Вы устанавливаете состояние, но не используете его для значения. Ваш <TextField> должен содержать свойство value:

<TextField 
   label="Description"
   styles={{ root: { width: 245 } }}
   value={this.state.value}
   onChange={this.handleChange.bind(this)} 
 />

И наконец, обратите внимание, что я связываю выше, потому что вы используете функцию, которая будет иметь другую область видимости для this. Есть несколько способов обойти это, но наименьшее изменение перечислено выше (используя связывание в рендере)