如何使用 TextField 强制所有大写字母?办公室 UI 面料
How Can I Force All Upper Case Letters with TextField? Office UI Fabric
在下面的代码中,我试图让标记为 "Description" 的 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()});
}
}
从根本上说,问题可能是 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
具有不同的作用域。有很多解决方法,但上面列出了最小的变化(在渲染中使用绑定)
在下面的代码中,我试图让标记为 "Description" 的 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()});
}
}
从根本上说,问题可能是 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
具有不同的作用域。有很多解决方法,但上面列出了最小的变化(在渲染中使用绑定)