Question

在我的react应用程序中，触发onBlur时会执行以下脚本。但是e.target返回null。所以我无法检索输入的文本进行验证。

handleNameValidation({ target }) {
    console.log("The target is : ", target);
}

但是，在触发onChange事件时，我有一个类似的脚本正常工作。这是一种预期的行为，或者如何在触发onBlur时访问该值。

任何指针都会有所帮助。

谢谢和问候，圣

Answer 1

看起来你丢失了处理程序的上下文：

1）使用类属性字段

handleNameValidation = ({ target }) => {
    console.log("The target is : ", target);
}

2）在contructor中绑定上下文

construtctor(props){
  super(props);

  this.handleNameValidation = this.handleNameValidation.bind(this);
}

handleNameValidation({ target }) {
    console.log("The target is : ", target);
}

Answer 2

这是一个有效的例子：

https://codesandbox.io/s/18kyz9v264

import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {
  render() {
    return <div>
      <input onBlur={this.onBlur} />
    </div>;
  }

  onBlur = (e) => {
    console.log(e.target);
  }
}

render(<App />, document.getElementById('root'));

在onBlur上触发e.target（）是未定义的

2 个答案: