触发onBlur时e.target（）未定义

Question

In my react application, the following script is executed when onBlur is fired. But e.target is returning null. So I'm unable to retrieve the text entered to validate.

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

But, I have a similar script working fine when firing an onChange event. Is this an expected behavior or how can I access the value when onBlur is fired.

Any pointers would be helpful.

Thanks and Regards, San

Answer 1

It looks like you have lost context of the handler:

1) use class property fields

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

2) bind context in contructor

construtctor(props){
  super(props);

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

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

Answer 2

Here is a working example:

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'));