reactjs - Two onChange Events for One TextField is Not Executing Both onChange Events
问题描述
In the following code, I am trying to execute two onChange events for one TextField. I tried executing both onChange events separately, and they work fine. Why won't both my events run at the same time? When I combined them, only the "handleChange" event is executing, not the "_onChange" event. What am I doing wrong?
import * as React from 'react';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Stack, IStackProps } from 'office-ui-fabric-react/lib/Stack';
export interface TestState {
[key: string]: TestState[keyof TestState];
descriptionVal: string;
multiline: boolean;
}
export default class Test extends React.Component<{}, TestState> {
constructor(props: {}) {
super(props);
this.state = {
descriptionVal: "",
multiline: false
};
}
public render(): JSX.Element {
const columnProps: Partial<IStackProps> = {
tokens: { childrenGap: 15 },
styles: { root: { width: 300 } },
};
return (
<Stack horizontal tokens={{ childrenGap: 50 }} styles={{ root: { width: 650 } }}>
<Stack {...columnProps}>
<TextField
label="Switches from single to multiline if more than 50 characters are entered"
multiline={this.state.multiline}
onChange={this.twoCalls}
value={this.state["descriptionVal"]}
/>
</Stack>
</Stack>
);
}
twoCalls = e => {
{this.handleChange("descriptionVal")(e)}
{this._onChange}
}
private _onChange = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newText: string): void => {
const newMultiline = newText.length > 50;
if (newMultiline !== this.state.multiline) {
console.log(ev);
this.setState({ multiline: newMultiline });
}
};
handleChange = (field: string) => (event: any) => {
const value = event.target.value.toUpperCase();
this.setState({ [field]: value });
};
}
解决方案
首先,您的语句周围有多余的花括号。其次,您实际上并没有调用第二个函数this.function !== this.function()
. 你应该这样做:
twoCalls = e => {
this.handleChange("descriptionVal")(e);
this._onChange(e);
}
推荐阅读
- java - 动态 Javafx 视图的控制器类
- java - How to store values in an array and save them in a file
- python-3.x - 当我使用 PIL 将裁剪粘贴到另一个图像时,它会引发 ValueError
- oop - How can one access a base class method using base class object once it has been overwritten?
- laravel - Foreach 条件添加一个数字而不是在 laravel 中重复一个项目
- three.js - 在 ShaderMaterial 中洗掉颜色
- python - How to make a Update command with SQL
- c# - 上传到 azure blob 容器未能对请求进行身份验证
- angular - 仅当错误是客户端时,Angular 重试 http 调用
- html - How to remove all conditional HTML comments?