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 => {
...
}

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

React Typescript Mui `onBlur` 触发每一个变化

React Typescript Mui `onBlur` firing every change

reactjs

typescript

blur

onblur

mui