如何使用 TextField 强制所有大写字母？办公室 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.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 范围。有很多方法可以解决它，但上面列出了最小的变化（在渲染中使用绑定）