如何使用TextField强制使用所有大写字母？ Office UI构造

Question

在下面的代码中，我试图获取标记为“描述”的TextField，以强制文本全部使用大写字母。我添加了handleChange代码，但是每次尝试在该字段中键入内容时，它将冻结我的表单。我怎样才能使这个TextField都是大写字母？除了onChange之外，还有其他方法吗？是否可以在不使用onChange的情况下使此TextField全部为大写字母？

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}  //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>

    );

  }
}

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} 
 />