logo
down
shadow

Add event handler to React.DOM element dynamically


Add event handler to React.DOM element dynamically

By : Jesus Bukowski
Date : November 21 2020, 01:01 AM
will help you You don't want to mess with click handlers on each button, just listen for the click on the container. Then update the state based on which child is clicked.
Also, with React it's best to keep all of your DOM stuff in the render function. In this case, defining an element's class name.
code :
var RadioButtonGroup = React.createClass({
    getInitialState: function getInitialState() {
        return {
            active: this.props.active || 0
        };
    },

    clickHandler: function clickHandler(e) {
        // Getting an array of DOM elements
        // Then finding which element was clicked
        var nodes = Array.prototype.slice.call( e.currentTarget.children );
        var index = nodes.indexOf( e.target );
        this.setState({ active: index });
    },

    render: function render() {
        var buttons = this.children.map(function(child, i) {
            if (i === this.state.active) child.props.className += ' active';
            return child;
        }, this);

        return (
            <div className="radio-button-group" onClick={ this.clickHandler }>
                { buttons }
            </div>
        )
    }
});


Share : facebook icon twitter icon
Making .on() handler react only to element's own event

Making .on() handler react only to element's own event


By : Ramanathan.J
Date : March 29 2020, 07:55 AM
wish helps you No, that's pretty much the most elegant way to handle it.
The only other way requires you to bind events on child elements and stoppropagation there, however, that would mean the child elements need to know about the parent element that may or may not be related. Better to just keep it within the single event, it will have the least impact on the rest of the page/application.
jquery: how to add event handler to dynamically added element without adding it to existing element again

jquery: how to add event handler to dynamically added element without adding it to existing element again


By : mgfnu
Date : March 29 2020, 07:55 AM
around this issue Use jquery's on method. This way you have to add event only once. This will be added automatically to dynamically added elements.
code :
$(document/parentSelector).on('click', '.toBuyItem', function() {
    // Event handler code here
});
How to render child element in parent element from event handler in react js

How to render child element in parent element from event handler in react js


By : Ted
Date : March 29 2020, 07:55 AM
it should still fix some issue you can put your selectedContries in state and in render you can iterate your component like that.
code :
import React from "react";
import SearchLocationBarItem from "./SearchLocationBarItem";

class SearchLocationBar extends React.Component {
  countries = [
    "Afghanistan",
    "Albania",
    "Algeria",
    "Andorra",
    "Angola",
    "Anguilla",
    "Antigua &amp; Barbuda",
    "Argentina",
    "Armenia",
    "Aruba",
    "Australia",
    "Austria",
    "Azerbaijan",
    "Bahamas",
    "Bahrain",
    "Bangladesh",
    "Barbados",
    "Belarus",
    "Belgium",
    "Belize",
    "Benin",
    "Bermuda",
    "Bhutan",
    "Bolivia",
    "Bosnia &amp; Herzegovina",
    "Botswana",
    "Brazil",
    "British Virgin Islands",
    "Brunei",
    "Bulgaria",
    "Burkina Faso",
    "Burundi",
    "Cambodia",
    "Cameroon",
    "Canada",
    "Cape Verde",
    "Cayman Islands",
    "Central Arfrican Republic",
    "Chad",
    "Chile",
    "China",
    "Colombia",
    "Congo",
    "Cook Islands",
    "Costa Rica",
    "Cote D Ivoire",
    "Croatia",
    "Cuba",
    "Curacao",
    "Cyprus",
    "Czech Republic",
    "Denmark",
    "Djibouti",
    "Dominica",
    "Dominican Republic",
    "Ecuador",
    "Egypt",
    "El Salvador",
    "Equatorial Guinea",
    "Eritrea",
    "Estonia",
    "Ethiopia",
    "Falkland Islands",
    "Faroe Islands",
    "Fiji",
    "Finland",
    "France",
    "French Polynesia",
    "French West Indies",
    "Gabon",
    "Gambia",
    "Georgia",
    "Germany",
    "Ghana",
    "Gibraltar",
    "Greece",
    "Greenland",
    "Grenada",
    "Guam",
    "Guatemala",
    "Guernsey",
    "Guinea",
    "Guinea Bissau",
    "Guyana",
    "Haiti",
    "Honduras",
    "Hong Kong",
    "Hungary",
    "Iceland",
    "India",
    "Indonesia",
    "Iran",
    "Iraq",
    "Ireland",
    "Isle of Man",
    "Israel",
    "Italy",
    "Jamaica",
    "Japan",
    "Jersey",
    "Jordan",
    "Kazakhstan",
    "Kenya",
    "Kiribati",
    "Kosovo",
    "Kuwait",
    "Kyrgyzstan",
    "Laos",
    "Latvia",
    "Lebanon",
    "Lesotho",
    "Liberia",
    "Libya",
    "Liechtenstein",
    "Lithuania",
    "Luxembourg",
    "Macau",
    "Macedonia",
    "Madagascar",
    "Malawi",
    "Malaysia",
    "Maldives",
    "Mali",
    "Malta",
    "Marshall Islands",
    "Mauritania",
    "Mauritius",
    "Mexico",
    "Micronesia",
    "Moldova",
    "Monaco",
    "Mongolia",
    "Montenegro",
    "Montserrat",
    "Morocco",
    "Mozambique",
    "Myanmar",
    "Namibia",
    "Nauro",
    "Nepal",
    "Netherlands",
    "Netherlands Antilles",
    "New Caledonia",
    "New Zealand",
    "Nicaragua",
    "Niger",
    "Nigeria",
    "North Korea",
    "Norway",
    "Oman",
    "Pakistan",
    "Palau",
    "Palestine",
    "Panama",
    "Papua New Guinea",
    "Paraguay",
    "Peru",
    "Philippines",
    "Poland",
    "Portugal",
    "Puerto Rico",
    "Qatar",
    "Reunion",
    "Romania",
    "Russia",
    "Rwanda",
    "Saint Pierre &amp; Miquelon",
    "Samoa",
    "San Marino",
    "Sao Tome and Principe",
    "Saudi Arabia",
    "Senegal",
    "Serbia",
    "Seychelles",
    "Sierra Leone",
    "Singapore",
    "Slovakia",
    "Slovenia",
    "Solomon Islands",
    "Somalia",
    "South Africa",
    "South Korea",
    "South Sudan",
    "Spain",
    "Sri Lanka",
    "St Kitts &amp; Nevis",
    "St Lucia",
    "St Vincent",
    "Sudan",
    "Suriname",
    "Swaziland",
    "Sweden",
    "Switzerland",
    "Syria",
    "Taiwan",
    "Tajikistan",
    "Tanzania",
    "Thailand",
    "Timor L'Este",
    "Togo",
    "Tonga",
    "Trinidad &amp; Tobago",
    "Tunisia",
    "Turkey",
    "Turkmenistan",
    "Turks &amp; Caicos",
    "Tuvalu",
    "Uganda",
    "Ukraine",
    "United Arab Emirates",
    "United Kingdom",
    "United States of America",
    "Uruguay",
    "Uzbekistan",
    "Vanuatu",
    "Vatican City",
    "Venezuela",
    "Vietnam",
    "Virgin Islands (US)",
    "Yemen",
    "Zambia",
    "Zimbabwe"
  ];
  state = {
    selectedCountries: []
  };
  handleOnInput = e => {
    let element = undefined;
    const filterdCountries = [];
    this.countries.map(country => {
      if (country.startsWith(e.target.value)) {
        filterdCountries.push(country);
      }
    });
    this.setState({
      selectedCountries: filterdCountries
    });
  };

  render() {
    return (
      <form autoComplete="off" method="post">
        <div id="custom-search-input">
          <div className="input-group ">
            <input
              type="text"
              className=" search-query"
              placeholder="Your Address or postal code"
              onInput={this.handleOnInput}
            />
            <div id="autocomplete" className="autocomplete-items">
              {this.state.selectedCountries.length &&
                this.state.selectedCountries.map((country, index) => (
                  <SearchLocationBarItem key={index} item={country} />
                ))}
            </div>
            <span className="input-group-btn">
              <input type="submit" className="btn_search" value="submit" />
            </span>
          </div>
        </div>
      </form>
    );
  }
}

export default SearchLocationBar;
How to attach an event handler to a dynamically created item in React

How to attach an event handler to a dynamically created item in React


By : Stephan Döring
Date : March 29 2020, 07:55 AM
will help you I am new to React and am trying to add an onClick event handle to a list item which is created using map. , This should do the trick:
In ResultsList:
code :
<ListedBooks
  data={this.props.listFromGoogle}
  AddThisToReadingList={this.AddThisToReadingList.bind(this)}
/>
<button onClick={()=>props.AddThisToReadingList(index)}>
  Add to my reading list
</button>
attach event handler to dynamically added element

attach event handler to dynamically added element


By : John Covac
Date : March 29 2020, 07:55 AM
this will help I have a javascript code, which adds an element dynamically and event handler to it. , Add your event handling once the element is actually in the DOM.
shadow
Privacy Policy - Terms - Contact Us © ourworld-yourmove.org