React JS onClick event handler

Question

I have   var TestApp   React createClass         getComponent  function              console log this props                  render  function            return                lt div gt                lt ul gt                   lt li onClick  this getComponent  gt Component 1 lt  li gt                lt  ul gt                lt  div gt                         React renderComponent  lt TestApp   gt   document body     I want to color the background of the clicked list element  How can I do this in React    Something like      li   on  click   function          this  css   background-color     ccc

User · Answer

Use ECMA2015  Arrow functions make  this  a lot more intuitive   import React from  react     class TestApp extends React Component      getComponent e  index             e target  css               background-color     ccc                     render            return               lt div gt                lt ul gt                  lt li onClick   e    gt  this getComponent e  1   gt Component 1 lt  li gt                  lt li onClick   e    gt  this getComponent e  2   gt Component 2 lt  li gt                  lt li onClick   e    gt  this getComponent e  3   gt Component 3 lt  li gt                lt  ul gt              lt  div gt                     React renderComponent  lt TestApp   gt    document getElementById  soln1

User · Answer

Here is how you define a react onClick event handler  which was answering the question title    using es6 syntax  import React    Component   from  react    export default class Test extends Component     handleClick e        e preventDefault       console log e target         render         return          lt a href     onClick  e   gt  this handleClick e   gt click me lt  a gt

User · Answer

x000D   x000D  import React from  react   x000D   x000D  class MyComponent extends React Component   x000D   x000D    getComponent event    x000D        event target style backgroundColor     ccc   x000D         x000D           or you can write x000D          arguments 0  target style backgroundColor     ccc   x000D      x000D   x000D    render     x000D      return  x000D          lt div gt  x000D            lt ul gt  x000D               lt li onClick  this getComponent bind this   gt Component 1 lt  li gt  x000D            lt  ul gt  x000D          lt  div gt  x000D         x000D      x000D    x000D   x000D  export   MyComponent        use this to be possible in future imports with    like  import  MyComponent  from    MyComponent  x000D  export default MyComponent  x000D   x000D   x000D

User · Answer

This is a non-standard  but not so uncommon  React pattern that doesn t use JSX  instead putting everything inline  Also  it s Coffeescript   The  React-way  to do this would be with the component s own state    c   console log bind console   mock items                  name   item a          uid  shortid                       name   item b          uid  shortid                       name   item c          uid  shortid           getInitialState  - gt      lighted item  null render  - gt      div null          ul null              for item  idx in  mock items                 uid   item uid                 li                     key  uid                     onClick  do  idx  uid    gt                           e    gt                                justf to illustrate these are bound in closure by the do lambda                              c idx                             c uid                              setState                                 lighted item  uid                     style                          cursor   pointer                          background  do  uid    gt                              c  state lighted item                             c  and uid   uid                             if  state lighted item is uid then  magenta  else  chartreuse                            background   chartreuse                      item name   This example works -- I tested it locally   You can check out this example code exactly at my github  Originally the env was only local for my own whiteboard r amp d purposes but I posted it to Github for this   It may get written over at some point but you can check out the commit from Sept 8  2016 to see this   More generally  if you want to see how this CS no-JSX pattern for React works  check out some recent work here  It s possible I will have time to fully implement a POC for this app idea  the stack for which includes NodeJS  Primus  Redis   amp  React

User · Answer

Why not   onItemClick  function  event         event currentTarget style backgroundColor     ccc        render  function         return            lt div gt               lt ul gt                   lt li onClick  this onItemClick  gt Component 1 lt  li gt               lt  ul gt           lt  div gt             And if you want to be more React-ive about it  you might want to set the selected item as state of its containing React component  then reference that state to determine the item s color within render   onItemClick  function  event         this setState   selectedItem  event currentTarget dataset id           where  id     whatever suffix you give the data-  li attribute     render  function         return            lt div gt               lt ul gt                   lt li onClick  this onItemClick  data-id  1  className  this state selectedItem    1    on     off   gt Component 1 lt  li gt                   lt li onClick  this onItemClick  data-id  2  className  this state selectedItem    2    on     off   gt Component 2 lt  li gt                   lt li onClick  this onItemClick  data-id  3  className  this state selectedItem    3    on     off   gt Component 3 lt  li gt               lt  ul gt           lt  div gt              You d want to put those  lt li gt s into a loop  and you need to make the li on and li off styles set your background-color

User · Answer

If you re using ES6  here s some simple example code   import React from  wherever react is    class TestApp extends React Component      getComponent event          console log  li item clicked           event currentTarget style backgroundColor     ccc          render         return          lt div gt            lt ul gt               lt li onClick  this getComponent bind this   gt Component 1 lt  li gt            lt  ul gt          lt  div gt                export default TestApp    In ES6 class bodies  functions no longer require the  function  keyword and they don t need to be separated by commas  You can also use the    syntax as well if you wish   Here s an example with dynamically created elements   import React from  wherever react is    class TestApp extends React Component    constructor props      super props      this state         data           name   Name 1   id  123          name   Name 2   id  456                 getComponent event          console log  li item clicked           event currentTarget style backgroundColor     ccc          render                     lt div gt            lt ul gt            this state data map d   gt               return                 lt li key  d id  onClick  this getComponent bind this   gt  d name  lt  li gt                                      lt  ul gt          lt  div gt                export default TestApp    Note that each dynamically created element should have a unique reference  key    Furthermore  if you would like to pass the actual data object  rather than the event  into your onClick function  you will need to pass that into your bind  For example   New onClick function    getComponent object        console log object name       Passing in the data object    this state data map d   gt        return         lt li key  d id  onClick  this getComponent bind this  d   gt  d name  lt  li gt

User · Answer

Handling events with React elements is very similar to handling events   on DOM elements  There are some syntactic differences          React events are named using camelCase  rather than lowercase     With JSX you pass a function as the event handler  rather than a string       So as mentioned in React documentation  they quite similar to normal HTML when it comes to Event Handling  but event names in React using camelcase  because they are not really HTML  they are JavaScript  also  you pass the function while we passing function call in a string format for HTML  they are different  but the concepts are pretty similar     Look at the example below   pay attention to the way event get passed to the function   function ActionLink       function handleClick e        e preventDefault        console log  The link was clicked            return        lt a href     onClick  handleClick  gt        Click me      lt  a gt

User · Answer

Two ways I can think of are   var TestApp   React createClass       getComponent  function index              this getDOMNode    find  li nth-child     index        css                background-color     ccc                         render  function             return                lt div gt                 lt ul gt                   lt li onClick  this getComponent bind this  1   gt Component 1 lt  li gt                   lt li onClick  this getComponent bind this  2   gt Component 2 lt  li gt                   lt li onClick  this getComponent bind this  3   gt Component 3 lt  li gt                 lt  ul gt               lt  div gt                       React renderComponent  lt TestApp   gt    document getElementById  soln1       This is my personal favorite   var ListItem   React createClass       getInitialState  function             return               isSelected  false                       handleClick  function             this setState               isSelected  true                       render  function             var isSelected   this state isSelected          var style                  background-color                         if  isSelected                style                      background-color     ccc                                   return                lt li onClick  this handleClick  style  style  gt  this props content  lt  li gt                        var TestApp2   React createClass       getComponent  function index              this getDOMNode    find  li nth-child     index        css                background-color     ccc                         render  function             return                lt div gt                lt ul gt                 lt ListItem content  Component 1    gt                 lt ListItem content  Component 2    gt                 lt ListItem content  Component 3    gt                lt  ul gt               lt  div gt                       React renderComponent  lt TestApp2   gt    document getElementById  soln2       Here is a DEMO  I hope this helps

User · Answer

x000D   x000D  class FrontendSkillList extends React Component   x000D    constructor     x000D      super    x000D      this state     selectedSkill        x000D      x000D    render     x000D      return   x000D         lt ul gt  x000D           this props skills map  skill  i    gt    x000D               lt li x000D                className   x000D                  this state selectedSkill id     skill id    selected       x000D                  x000D                onClick  this selectSkill bind this  skill   x000D                style    cursor   pointer     x000D                key  skill id  x000D               gt  x000D               skill name  x000D               lt  li gt  x000D              x000D         lt  ul gt  x000D         x000D      x000D   x000D    selectSkill selected    x000D      if  selected id     this state selectedSkill id    x000D        this setState   selectedSkill  selected     x000D        else   x000D        this setState   selectedSkill         x000D        x000D      x000D    x000D   x000D  const data     x000D      id   1   name   HTML5     x000D      id   2   name   CSS3     x000D      id   3   name   ES6  amp  ES7    x000D     x000D  const element     x000D     lt div gt  x000D       lt h1 gt Frontend Skill List lt  h1 gt  x000D       lt FrontendSkillList skills  data    gt  x000D     lt  div gt  x000D     x000D  ReactDOM render element  document getElementById  root     x000D   selected   x000D    background-color  rgba 217  83  79  0 8   x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 6 3 umd react production min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 6 3 umd react-dom production min js  gt  lt  script gt  x000D   x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D     user544079 Hope this demo can help    I recommend changing background color by toggling classname

User · Answer

x000D   x000D  import React from  react   x000D   x000D  class MyComponent extends React Component   x000D   x000D    getComponent event    x000D        event target style backgroundColor     ccc   x000D         x000D           or you can write x000D          arguments 0  target style backgroundColor     ccc   x000D      x000D   x000D    render     x000D      return  x000D          lt div gt  x000D            lt ul gt  x000D               lt li onClick  this getComponent bind this   gt Component 1 lt  li gt  x000D            lt  ul gt  x000D          lt  div gt  x000D         x000D      x000D    x000D   x000D  export   MyComponent        use this to be possible in future imports with    like  import  MyComponent  from    MyComponent  x000D  export default MyComponent  x000D   x000D   x000D

User · Answer

You can make use of the React createClone method  Create your element  than create a clone of it  During the clone s creation  you can inject props  Inject an onClick   method prop like this     onClick        gt  this changeColor originalElement  index     the changeColor method will set the state with the duplicate  allowing you sto set the color in the process    x000D   x000D  render   x000D      x000D      return  x000D         lt ul gt  x000D   x000D           this state items map  val  ind    gt    x000D            let item    lt li key  ind  gt  val  lt  li gt   x000D            let props      x000D              onClick       gt  this Click item  ind   x000D              key   ind  x000D              ind x000D              x000D            let clone   React cloneElement item  props   val    x000D            return clone  x000D              x000D   x000D         lt  ul gt  x000D        x000D      x000D   x000D   x000D

[javascript] React JS onClick event handler

Examples related to javascript

Examples related to jquery

Examples related to reactjs