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

check if event target is button
event.target.value undefined
event.target.getattribute react
react htmlinputelement
event.target.style react
event target parent react
check if target is checkbox
react event target null

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

The code is this:

<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.

if (event.target instanceof HTMLInputElement)

How works event.target.value? - JavaScript, The same way as you do with HTML! To start you off, I've added some buttons and a disabled input. As always, you can check the solution if you get stuck, but you may not check And to do so, you'll need to set a callback on the element's props . The event object will be passed to your callback as its first argument. Using the event .target property together with the element .tagName property to find out which element triggered a specified event: var x = event.target.tagName; Try it Yourself ». DOM Events Event Object.

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>

Everything About React Events, currentTarget when the event handler is called during the bubbling or function hide(e){ // e.target refers to the clicked <li> element // This is� In regular HTML, when we work with an input element, the page’s DOM maintains that element’s value in its DOM node. event.target.value})} for more on React and its myriad uses check

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.

Event.target, The JavaScript interface for such elements differs with the type of the element. Unlike most elements in an HTML document, form fields can get keyboard focus. We can write code to verify that the values the user entered make sense and objects have a target property referring to the element that triggered the event. Inside of it we have label element with two children: 1) input element and 2) label text. The input element renders the checkbox. It has 4 properties: type - the type of input: checkbox in our case. value - the value of input: which is a label name passed as property from a parent Application component. checked - whether it's checked or not.

Forms and Form Fields :: Eloquent JavaScript, The target event property returns the element that triggered the event. The target tagName property to find out which element triggered a specified event:. With a controlled component, the input’s value is always driven by the React state. While this means you have to type a bit more code, you can now pass the value to other UI elements too, or reset it from other event handlers. The textarea Tag . In HTML, a <textarea> element defines its text by its children:

target Event Property, See the Handling Events guide to learn more. If you find that you need the underlying browser event for some reason, simply use the This means that the SyntheticEvent object will be reused and all properties will be nullified after the These focus events work on all elements in the React DOM, not just form elements. To render arbitrary HTML inside a React element, you have to write dangerouslySetInnerHTML={{ __html: message.text }}. The fact that it’s clumsy to write is a feature . It’s meant to be highly visible so that you can catch it in code reviews and codebase audits.

SyntheticEvent – React, The idea is that if we have a lot of elements handled in a similar way, then In the handler we get event.target , see where the event actually happened and handle it. In our case if we take a look inside the HTML, we can see nested value = " 1 " data-counter > One more counter: < input type = " button� Check compatibility, or use the change event instead for elements of these types. Note: The input event is fired every time the value of the element changes. This is unlike the change event, which only fires when the value is committed, such as by pressing the enter key, selecting a value from a list of options, and the like.

Comments
  • I don't understand why you have to create thousands callback function ? It's the same if you validate and call the right function. Btw you can check type using event.target.type when you add event.
  • Why you want to check the type of element?
  • please see stackoverflow.com/help/someone-answers