reactjs - React Typescript Mui `onBlur` 触发每个更改

Question

我正在使用 Typescript 和 React 编写前端应用程序，并且正在使用 MUI。我有以下表格代码：

<TextField
  label="Password"
  value={this.state.password}
  placeholder="Choose a password"
  type="password"
  onChange={(event: any) => this.setState({
    password: event.target.value
  })}
  onBlur={console.log('here')}
  error={this.state.passwordError}
/>

使用此代码，每次我单击一个键时，onBlur都会被触发。不是只有在我离开表格时才会触发吗？

Answer 1

onblur看看这个功能会很有帮助。看起来您不想向其传递任何内容，因此只需将行更改为onBlur={this.onblur()}即可onBlur={this.onblur}。

但是，如果您的函数看起来像这样

onblur() {
...
}

那么你应该将上下文绑定到它（'this'）。相反，我建议去

onblur = event => {
...
}

这将具有已经绑定的上下文。