OnChange event using React JS for drop down

Question

var MySelect   React createClass        change  function             return document querySelector   lang   value               render  function            return              lt div gt                  lt select id  lang  gt                     lt option value  select  onChange  this change  gt Select lt  option gt                     lt option value  Java  onChange  this change  gt Java lt  option gt                     lt option value  C    onChange  this change  gt C   lt  option gt                  lt  select gt                  lt p gt  lt  p gt                  lt p value  this change  gt  lt  p gt              lt  div gt                         React render  lt MySelect   gt   document body     The onChange event does not work

User · Answer

var MySelect   React createClass   getInitialState  function         x000D   x000D  var MySelect   React createClass    getInitialState  function          return            value   select              change  function event        event persist      THE MAIN LINE THAT WILL SET THE VALUE      this setState  value  event target value         render  function        return          lt div gt              lt select id  lang  onChange  this change bind this   value  this state value  gt                 lt option value  select  gt Select lt  option gt                 lt option value  Java  gt Java lt  option gt                 lt option value  C    gt C   lt  option gt              lt  select gt              lt p gt  lt  p gt              lt p gt  this state value  lt  p gt          lt  div gt                React render  lt MySelect   gt   document body    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 6 3 umd react production min js  gt  lt  script gt   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   x000D

User · Answer

React Hooks  16 8    const Dropdown        options      gt      const  selectedOption  setSelectedOption    useState options 0  value     return          lt select         value  selectedOption          onChange  e   gt  setSelectedOption e target value   gt           options map o   gt               lt option key  o value  value  o value  gt  o label  lt  option gt                     lt  select gt

User · Answer

The change event is triggered on the  lt select gt  element  not the  lt option gt  element  However  that s not the only problem  The way you defined the change function won t cause a rerender of the component  It seems like you might not have fully grasped the concept of React yet  so maybe  Thinking in React  helps   You have to store the selected value as state and update the state when the value changes  Updating the state will trigger a rerender of the component   var MySelect   React createClass        getInitialState  function              return                value   select                          change  function event            this setState  value  event target value                 render  function            return              lt div gt                  lt select id  lang  onChange  this change  value  this state value  gt                     lt option value  select  gt Select lt  option gt                     lt option value  Java  gt Java lt  option gt                     lt option value  C    gt C   lt  option gt                  lt  select gt                  lt p gt  lt  p gt                  lt p gt  this state value  lt  p gt              lt  div gt                         React render  lt MySelect   gt   document body     Also note that  lt p gt  elements don t have a value attribute  React JSX simply replicates the well-known HTML syntax  it doesn t introduce custom attributes  with the exception of key and ref   If you want the selected value to be the content of the  lt p gt  element then simply put inside of it  like you would do with any static content   Learn more about event handling  state and form controls    http   facebook github io react docs interactivity-and-dynamic-uis html http   facebook github io react docs forms html

User · Answer

If you are using select as inline to other component  then you can also use like given below    lt select onChange   val    gt  this handlePeriodChange val target value   className  btn btn-sm btn-outline-secondary dropdown-toggle  gt       lt option value  TODAY  gt Today lt  option gt       lt option value  THIS WEEK   gt This Week lt  option gt       lt option value  THIS MONTH  gt This Month lt  option gt       lt option value  THIS YEAR  gt This Year lt  option gt       lt option selected value  LAST AVAILABLE DAY  gt Last Availabe NAV Day lt  option gt   lt  select gt    And on the component where select is used  define the function to handle onChange like below   handlePeriodChange selVal        this props handlePeriodChange selVal

User · Answer

import React    PureComponent  Fragment   from  react   import ReactDOM from  react-dom    class Select extends PureComponent     state         options                    name   Select              value  null                           name   A           value   a                            name   B           value   b                            name   C           value   c                       value               handleChange    event    gt        this setState   value  event target value             render         const   options  value     this state       return          lt Fragment gt           lt select onChange  this handleChange  value  value  gt             options map item   gt                 lt option key  item value  value  item value  gt                 item name               lt  option gt                         lt  select gt           lt h1 gt Favorite letter   value  lt  h1 gt         lt  Fragment gt                ReactDOM render  lt Select   gt   window document body

User · Answer

Thank you Felix Kling  but his answer need a little change   var MySelect   React createClass    getInitialState  function          return            value   select              change  function event        this setState  value  event target value         render  function        return          lt div gt              lt select id  lang  onChange  this change bind this   value  this state value  gt                 lt option value  select  gt Select lt  option gt                 lt option value  Java  gt Java lt  option gt                 lt option value  C    gt C   lt  option gt              lt  select gt              lt p gt  lt  p gt              lt p gt  this state value  lt  p gt          lt  div gt                React render  lt MySelect   gt   document body

[javascript] OnChange event using React JS for drop down

Examples related to javascript

Examples related to reactjs