一个 TextField 的两个 onChange 事件未同时执行两个 onChange 事件

Question

在下面的代码中，我尝试为一个 TextField 执行两个 onChange 事件。我尝试分别执行两个 onChange 事件，它们工作正常。为什么我的两个事件运行不能同时进行？当我组合它们时，只有 "handleChange" 事件在执行，而不是“_onChange”事件。我做错了什么？

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 });
  };
  }

Answer 1

首先，您的语句周围有不需要的额外花括号。其次，您实际上并没有调用第二个函数 this.function !== this.function()。你应该这样做：

twoCalls = e => {
    this.handleChange("descriptionVal")(e);
    this._onChange(e);
}

Answer 2

"twoCalls"需要这样

  twoCalls = (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newText: string): void => {
    this.handleChange("descriptionVal")(e);

    this._onChange(e, newText);
}

一个 TextField 的两个 onChange 事件未同时执行两个 onChange 事件

Two onChange Events for One TextField is Not Executing Both onChange Events

onchange

uitextfield

reactjs

office-js

tsx