---
url: /docs/guide/usage/linter/rules/react/jsx-handler-names.md
---

### 它的作用

确保用于处理事件的任何组件或属性方法都使用正确的前缀。

### 为什么这不好？

事件处理器和属性命名不一致会降低代码可读性和可维护性。

### 示例

以下是此规则的**错误**代码示例：

```jsx
<MyComponent handleChange={this.handleChange} />
<MyComponent onChange={this.componentChanged} />
```

以下是此规则的**正确**代码示例：

```jsx
<MyComponent onChange={this.handleChange} />
<MyComponent onChange={this.props.onFoo} />
```

## 配置

此规则接受一个包含以下属性的配置对象：

### checkInlineFunction

type: `boolean`

default: `false`

是否检查 JSX 属性中的内联函数。

### checkLocalVariables

type: `boolean`

default: `false`

是否检查 JSX 属性中的局部变量。

### eventHandlerPrefix

type: `string | boolean`

default: `"handle"`

要检查的事件处理器前缀。

### eventHandlerPropPrefix

type: `string | boolean`

default: `"on"`

要检查的事件处理器属性前缀。

### ignoreComponentNames

type: `string[]`

default: `[]`

检查事件处理器前缀时要忽略的组件名称。

## 如何使用

## 版本

此规则于 v1.13.0 中添加。

## 参考资料