如何对多个 TextField 使用一个 handleChange 事件?
How to Use One handleChange Event for Multiple TextFields?
在下面的代码中,我将 "Supplier Name" TextField 设置为所有大写字母。如果我想将它添加到 "Comments" TextField,我知道我可以添加更多 handleChange 事件并以不同的方式命名它们。有没有办法对多个 TextFields 使用相同的 handleChange 事件,因为我想做完全相同的事情?
import * as React from "react";
import { TextField} from 'office-ui-fabric-react/lib/TextField';
export interface WhosebugState {
value: string;
}
export default class Whosebug extends React.Component<{}, WhosebugState> {
public state: WhosebugState = { value: '' };
render() {
this.handleChange = this.handleChange.bind(this);
;
return (
<div className="ms-welcome">
<TextField
label="Supplier Name"
styles={{ root: { width: 150 } }}
onChange={this.handleChange.bind(this)}
value={this.state.value}
/>
<TextField
label="Comments"
styles={{ root: { width: 300 } }}
/>
</div>
);
}
handleChange(event) {
this.setState({value: event.target.value.toUpperCase()});
}
}
您可以使用对象作为状态,其中包含键作为字段名称和针对相应字段名称的值
state = { values : {} };
onChange = (name, e) => {
this.setState(state => ({ values: { ...state.values, [name]: e.target.value } }));
// If e.target.name contains field name, no need to add extra name parameter in this method, you can use that as name
}
<TextField
label="Supplier Name"
styles={{ root: { width: 150 } }}
onChange={e => this.handleChange('supplierName', e)}
value={this.state.values.supplierName}
/>
<TextField
label="Comments"
styles={{ root: { width: 300 } }}
onChange={e => this.handleChange('comments', e)}
value={this.state.values.comments}
/>
尝试多使用绑定 :)
import * as React from "react";
import { TextField} from 'office-ui-fabric-react/lib/TextField';
export interface WhosebugState {
value: string;
comments: string;
}
export default class Whosebug extends React.Component<{}, WhosebugState> {
public state: WhosebugState = { value: '', comments: '' };
private const handleChange = (stateField: keyof WhosebugState) => (event) {
this.setState({ [stateField]: event.target.value.toUpperCase()});
}
render() {
return (
<div className="ms-welcome">
<TextField
label="Supplier Name"
styles={{ root: { width: 150 } }}
onChange={this.handleChange('value')}
value={this.state.value}
/>
<TextField
label="Comments"
onChange={this.handleChange.('comments')}
styles={{ root: { width: 300 } }}
/>
</div>
);
}
}
一些注意事项:
- 不要在 render() 中使用
.bind(this)
,可选择使用箭头函数。
- 使用
constructor()
初始化经典组件的状态。
- 具有标识索引的公共处理程序函数已作为参数传递。
- 使用
[key: string]: State[keyof State]
启用通过字符串选择属性。
此外,我们可以:
- 使用状态数组
- 使用本地 HOC 避免在索引上重复自己
- 使用数组生成渲染元素
import * as React from "react";
import { TextField } from "office-ui-fabric-react/lib/TextField";
export interface State {
[key: string]: State[keyof State];
inputA: string;
inputB: string;
}
export default class App extends React.Component<{}, State> {
constructor(props: {}) {
super(props);
this.state = {
inputA: "",
inputB: ""
};
}
handleChange = (field: string) => (event: any) => {
const value = event.target.value.toUpperCase();
this.setState({ [field]: value });
};
render() {
console.log(this.state);
return (
<div className="ms-welcome">
<TextField
label="Supplier Name"
styles={{ root: { width: 150 } }}
onChange={this.handleChange("inputA")}
value={this.state["inputA"]}
/>
<TextField
label="Comments"
styles={{ root: { width: 300 } }}
onChange={this.handleChange("inputB")}
value={this.state["inputB"]}
/>
</div>
);
}
}
使用单个事件处理程序处理多个输入。您必须为输入值指定唯一的名称,并且您可以根据唯一的名称编写句柄更改。
<div className="ms-welcome">
<TextField
name="input1"
onChange={this.handleChange.bind(this)}
value={this.state.value}
/>
<TextField
name="input2"
onChange={this.handleChange.bind(this)}
value={this.state.value}
/>
</div>
现在您可以根据应用于输入字段的唯一名称简单地编写句柄更改
HandleChange (e) {
this.setState({[e.target.name]: e.target.value})
}
当事件来自第一个输入时 e.target.name
将是 input1,当事件来自第二个输入时 e.target.name
将是 input2。
在下面的代码中,我将 "Supplier Name" TextField 设置为所有大写字母。如果我想将它添加到 "Comments" TextField,我知道我可以添加更多 handleChange 事件并以不同的方式命名它们。有没有办法对多个 TextFields 使用相同的 handleChange 事件,因为我想做完全相同的事情?
import * as React from "react";
import { TextField} from 'office-ui-fabric-react/lib/TextField';
export interface WhosebugState {
value: string;
}
export default class Whosebug extends React.Component<{}, WhosebugState> {
public state: WhosebugState = { value: '' };
render() {
this.handleChange = this.handleChange.bind(this);
;
return (
<div className="ms-welcome">
<TextField
label="Supplier Name"
styles={{ root: { width: 150 } }}
onChange={this.handleChange.bind(this)}
value={this.state.value}
/>
<TextField
label="Comments"
styles={{ root: { width: 300 } }}
/>
</div>
);
}
handleChange(event) {
this.setState({value: event.target.value.toUpperCase()});
}
}
您可以使用对象作为状态,其中包含键作为字段名称和针对相应字段名称的值
state = { values : {} };
onChange = (name, e) => {
this.setState(state => ({ values: { ...state.values, [name]: e.target.value } }));
// If e.target.name contains field name, no need to add extra name parameter in this method, you can use that as name
}
<TextField
label="Supplier Name"
styles={{ root: { width: 150 } }}
onChange={e => this.handleChange('supplierName', e)}
value={this.state.values.supplierName}
/>
<TextField
label="Comments"
styles={{ root: { width: 300 } }}
onChange={e => this.handleChange('comments', e)}
value={this.state.values.comments}
/>
尝试多使用绑定 :)
import * as React from "react";
import { TextField} from 'office-ui-fabric-react/lib/TextField';
export interface WhosebugState {
value: string;
comments: string;
}
export default class Whosebug extends React.Component<{}, WhosebugState> {
public state: WhosebugState = { value: '', comments: '' };
private const handleChange = (stateField: keyof WhosebugState) => (event) {
this.setState({ [stateField]: event.target.value.toUpperCase()});
}
render() {
return (
<div className="ms-welcome">
<TextField
label="Supplier Name"
styles={{ root: { width: 150 } }}
onChange={this.handleChange('value')}
value={this.state.value}
/>
<TextField
label="Comments"
onChange={this.handleChange.('comments')}
styles={{ root: { width: 300 } }}
/>
</div>
);
}
}
一些注意事项:
- 不要在 render() 中使用
.bind(this)
,可选择使用箭头函数。 - 使用
constructor()
初始化经典组件的状态。 - 具有标识索引的公共处理程序函数已作为参数传递。
- 使用
[key: string]: State[keyof State]
启用通过字符串选择属性。
此外,我们可以:
- 使用状态数组
- 使用本地 HOC 避免在索引上重复自己
- 使用数组生成渲染元素
import * as React from "react";
import { TextField } from "office-ui-fabric-react/lib/TextField";
export interface State {
[key: string]: State[keyof State];
inputA: string;
inputB: string;
}
export default class App extends React.Component<{}, State> {
constructor(props: {}) {
super(props);
this.state = {
inputA: "",
inputB: ""
};
}
handleChange = (field: string) => (event: any) => {
const value = event.target.value.toUpperCase();
this.setState({ [field]: value });
};
render() {
console.log(this.state);
return (
<div className="ms-welcome">
<TextField
label="Supplier Name"
styles={{ root: { width: 150 } }}
onChange={this.handleChange("inputA")}
value={this.state["inputA"]}
/>
<TextField
label="Comments"
styles={{ root: { width: 300 } }}
onChange={this.handleChange("inputB")}
value={this.state["inputB"]}
/>
</div>
);
}
}
使用单个事件处理程序处理多个输入。您必须为输入值指定唯一的名称,并且您可以根据唯一的名称编写句柄更改。
<div className="ms-welcome">
<TextField
name="input1"
onChange={this.handleChange.bind(this)}
value={this.state.value}
/>
<TextField
name="input2"
onChange={this.handleChange.bind(this)}
value={this.state.value}
/>
</div>
现在您可以根据应用于输入字段的唯一名称简单地编写句柄更改
HandleChange (e) {
this.setState({[e.target.name]: e.target.value})
}
当事件来自第一个输入时 e.target.name
将是 input1,当事件来自第二个输入时 e.target.name
将是 input2。