How do I check if my event.target is typeof HTML input element in React?

user_11169941 0
Viewed 12712

Please see this minimum example https://codepen.io/rockmandash/pen/Rzwowd

The code is this:

enter image description here

<div class="cool">
  <input type="checkbox" value="checkbox1">
  <input type="checkbox" value="checkbox2">
  <input type="checkbox" value="checkbox3">
</div>

document.querySelector(".cool").addEventListener("click", event => {
  // In React World
  // How do I check if event.target is typeof HTML.input Element?
  console.log(event.target.value);
});

I'm asking this question because I have thousands of input elements, in react, I will have to create thousands callback function.

So I move my function up to their parent, but then I have to validate if I am current clicking an input element.

Otherwise, I could potentially set the wrong event.target.value.

reactjs javascript
3 Answers
if (event.target instanceof HTMLInputElement)
user_42906060

Use event type

handleCheck = (event) => {
  // In React World
  console.log(event.target.type);
}

<div class="cool">
  <input onClick={this.handleCheck} type="checkbox" value="checkbox1" />
  <input onClick={this.handleCheck} type="checkbox" value="checkbox2" />
  <input onClick={this.handleCheck} type="checkbox" value="checkbox3" />
</div>

DEMO

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  handleCheck = (event) => {
    console.log(event.target.type);
  }

  render() {
    return (
      <div>
      <div class="cool">
        <input onClick={this.handleCheck} type="checkbox" value="checkbox1" />
        <input onClick={this.handleCheck} type="checkbox" value="checkbox2" />
        <input onClick={this.handleCheck} type="checkbox" value="checkbox3" />
        
        <input onChange={this.handleCheck} type="text" />
      </div>
      </div>
    );
  }
}

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

user_38588060

This is a good example of event delegation. See How JavaScript Event Delegation Works.

To check the type of the clicked element use tagName or nodeName.

if (event.target.nodeName === "A")

Please notice you need to use upper case: DIV, LI, A,...

Note: In your specific case you can check the type of your input element like so: event.target.type === "submit". But elements like div, li, a don't have a type attribute so the value of event.target.type will be undefined for them all.

user_18517830
Related