使用 TypeScript material-ui 在 React 中模拟点击事件答案

【问题标题】：Simulate click event in React with TypeScript material-ui使用 TypeScript material-ui 在 React 中模拟点击事件
【发布时间】：2020-04-25 17:27:47
【问题描述】：

我正在渲染一些 Material-ui 文本字段。通过手动输入其中的值，它将正常工作。它使用 handleChange()（更改）和 handleBlur()（自动保存）来处理这些事件。但情况是我必须通过商店而不是手动输入来更新值。

所以，如果我从商店传递值，它实际上并没有更新值，除非我在字段内部单击并单击离开或跳出。该值显示在字段内，但不调用 handleChange() 和 handleBlur() 这是更新内部值的唯一方法。此外，我必须至少输入一个值。

方法：

我为该字段设置了一个 onFocus，并在它的 handleFocus 上，我试图模拟 click() 和 blur() 或调用 handleClick() 和 handleBlur()。如果我模拟点击事件，

未捕获的 TypeError：element.click 不是函数

如果我尝试调用 handleChange() 和 handleBlur()

  readonly refO: React.RefObject<HTMLInputElement>;

  constructor(props: InputProps) {
    super(props);
    this.refO = React.createRef<HTMLInputElement>();
  }

...
        <TextField
          autoFocus
          inputRef={this.refO}
          id={this.labelId}
          required={required}
          label={label}
          error={error}
          value={this.setValue()}
          onBlur={handleBlur}
          onChange={handleChange}
          disabled={disabled}
          fullWidth
          type={type}
          InputLabelProps={InputLabelProps}
          InputProps={{ className: cx({ [classes.modified]: isModified }) }}
          onFocus={this.handleFocus}
        />

为了实现这一点，我可以在 handleFocus() 中做什么。或实现这一目标的正确方法。我对 TypeScript 很陌生。我的方法是错误的还是有其他方法可以解决这个问题。

  handleFocus = (element: HTMLInputElement) => {
   element.click();
   this.props.handleChange();
   this.props.handleBlur();
  }

PS：由于某些敏感性问题，无法添加更多代码。

【问题讨论】：

您能否在codesandbox.io 中设置您的环境？在那里帮助你会更快（你可以在没有打字稿的情况下做到这一点，一旦这项工作你可以转移到 ts）。

标签： reactjs typescript material-ui

【解决方案1】：

解决了这个问题。

我知道必须从 handleFocus 内部完成。但我正在做的是从中调用其他事件处理程序。然后我想我为什么要这样做。该函数已被调用，因此只需更新其中的值即可。

 handleFocus = (value) => {
  //  update my value
 }

这是非常规的，但我们只需要结果。

ps：我什至在 Twitter 上 ping 了几个人（这让我们的声誉受到了威胁。这是一场与时间的赛跑）。我是那么绝望。我向他们道歉。

【讨论】：