CODEWITHSUNDEEP
typescriptoffice-ui-fabrictsxreact-tsx
Ethan
Ethan

Reputation: 837

How Can I Force All Upper Case Letters with TextField? Office UI Fabric

In the following code, I am trying to get the TextField labeled "Description" to force the text to be all upper case letter. I added the handleChange code, but everytime I try to type in the field, it will freeze my form. How can I get this TextField to be all upper case letters? Is there a different way of doing this besides onChange? Can I make this TextField all upper case letters without using 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>

    );

  }
}

After rfestag's help, here is the final answer

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()});
  }
}

Upvotes: 0

Views: 695

Answers (1)

rfestag
rfestag

Reputation: 2008

Fundamentally, the issue is probably that this.state is undefined. You need to either initialize it in a constructor, or add this before your render function is defined:

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

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

More details on controlled components with that library can be found here: https://developer.microsoft.com/en-us/fabric#/controls/web/textfield

Additionally, you currently don't have a controlled component (which means you aren't in control of the value). You are setting the state, but you aren't using that for the value. Your <TextField> should contain a value property:

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

Lastly, note that I am binding above that is because you are using a function, which will have a different scope for this. There are a bunch of ways around it, but the smallest change is listed above (using bind in the render)

Upvotes: 2

Related Questions