React trigger onChange if input value is changing by state

Question

Edit  I don t want to call handleChange only if the button has been clicked  It has nothing to do with handleClick  I gave an example in the  shubhakhatri answer s comment   I want to change the input value according to state  the value is changing but it doesn t trigger handleChange   method  How can I trigger handleChange   method     class App extends React Component     constructor props        super props      this state         value   random text              handleChange  e        console log  handle change called         handleClick          this setState  value   another random text          render          return          lt div gt           lt input value  this state value  onChange  this handleChange   gt           lt button onClick  this handleClick bind this   gt Change Input lt  button gt         lt  div gt               ReactDOM render  lt App   gt    document getElementById  app      Here is the codepen link  http   codepen io madhurgarg71 pen qrbLjp

User · Answer

The other answers talked about direct binding in render hence I want to add few points regarding that.

You are not recommended to bind the function directly in render or anywhere else in the component except in constructor. Because for every function binding a new function/object will be created in webpack bundle js file hence the bundle size will grow. Your component will re-render for many reasons like when you do setState, new props received, when you do this.forceUpdate() etc. So if you directly bind your function in render it will always create a new function. Instead do function binding always in constructor and call the reference wherever required. In this way it creates new function only once because constructor gets called only once per component.

How you should do is something like below

constructor(props){
  super(props);
  this.state = {
    value: 'random text'
  }
  this.handleChange = this.handleChange.bind(this);
}

handleChange (e) {
  console.log('handle change called');
  this.setState({value: e.target.value});
}

<input value={this.state.value} onChange={this.handleChange}/>

You can also use arrow functions but arrow functions also does create new function every time the component re-renders in certain cases. You should know about when to use arrow function and when are not suppose to. For detailed explation about when to use arrow functions check the accepted answer here

User · Answer

Try this code if state object has sub objects like this state class fee  We can pass values using following code   this setState   class  Object assign     this state class     element   value

User · Answer

You need to trigger the onChange event manually  On text inputs onChange listens for input events   So in you handleClick function you need to trigger event like   handleClick          this setState  value   another random text        var event   new Event  input     bubbles  true         this myinput dispatchEvent event         Complete code  class App extends React Component     constructor props        super props      this state         value   random text              handleChange  e        console log  handle change called         handleClick          this setState  value   another random text        var event   new Event  input     bubbles  true         this myinput dispatchEvent event         render          return          lt div gt           lt input readOnly value  this state value  onChange   e    gt   this handleChange e    ref   input   gt  this myinput   input   gt           lt button onClick  this handleClick bind this   gt Change Input lt  button gt         lt  div gt               ReactDOM render  lt App   gt    document getElementById  app      Codepen  Edit   As Suggested by  Samuel in the comments  a simpler way would be to call handleChange from handleClick if you don t need to the event object in handleChange like  handleClick          this setState  value   another random text        this handleChange          I hope this is what you need and it helps you

User · Answer

Solution Working in the Year 2020 and 2021  I tried the other solutions and nothing worked  This is because of input logic in React js has been changed  For detail  you can see this link  https   hustle bizongo in simulate-react-on-change-on-controlled-components-baa336920e04  In short  when we change the value of input by changing state and then dispatch a change event then React will register both the setState and the event and consider it a duplicate event and swallow it  The solution is to call native value setter on input  See setNativeValue function in following code  Example Code import React    Component   from  react  export class CustomInput extends Component        inputElement   null              THIS FUNCTION CALLS NATIVE VALUE SETTER     setNativeValue element  value            const valueSetter   Object getOwnPropertyDescriptor element   value   set          const prototype   Object getPrototypeOf element           const prototypeValueSetter   Object getOwnPropertyDescriptor prototype   value   set           if  valueSetter  amp  amp  valueSetter     prototypeValueSetter                prototypeValueSetter call element  value             else               valueSetter call element  value                         constructor props            super props            this state                 inputValue  this props value                        addToInput    valueToAdd    gt            this setNativeValue this inputElement   this state inputValue    valueToAdd           this inputElement dispatchEvent new Event  input     bubbles  true                  handleChange   e   gt            console log e           this setState   inputValue  e target value             this props onChange e               render             return                lt div gt                   lt button type  quot button quot  onClick       gt  this addToInput -1   gt - lt  button gt                   lt input                     readOnly                     ref  input   gt    this inputElement   input                        name  this props name                      value  this state inputValue                      onChange  this handleChange  gt  lt  input gt                   lt button type  quot button quot  onClick       gt  this addToInput  1   gt   lt  button gt               lt  div gt                     export default CustomInput  Result

User · Answer

Approach with React Native and Hooks  You can wrap the TextInput into a new one that watches if the value changed and trigger the onChange function if it does  import React    useState  useEffect   from  react   import   View  TextInput as RNTextInput  Button   from  react-native       New TextInput that triggers onChange when value changes     You can add more TextInput methods as props to it  const TextInput      onChange  value  placeholder      gt          When value changes  you can do whatever you want or just to trigger the onChange function   useEffect      gt        onChange value         value       return        lt RNTextInput       onChange  onChange        value  value        placeholder  placeholder        gt           const Main        gt       const  myValue  setMyValue    useState         const handleChange    value    gt        setMyValue value       console log  quot Handling value quot            const randomLetters       Array 15   map      gt  Math random   toString 36  2   join         return        lt View gt         lt TextInput         placeholder  quot Write something here quot          onChange  handleChange          value  myValue          gt         lt Button         title  Change value with state          onPress       gt  setMyValue randomLetters           gt       lt  View gt           export default Main

User · Answer

I know what you mean  you want to trigger handleChange by click button   But modify state value will not trigger onChange event  because onChange event is a form element event

User · Answer

I had a similar need and end up using componentDidMount    that one is called long after component class constructor  where you can initialize state from props - as an exmple using redux    Inside componentDidMount you can then invoke your handleChange method for some UI animation or perform any kind of component properties updates required   As an example I had an issue updating an input checkbox type programatically  that s why I end up using this code  as onChange handler was not firing at component load      componentDidMount             Update checked      const checkbox   document querySelector   type  checkbox           if  checkbox         checkbox checked   this state isChecked        State was first updated in component class constructor and then utilized to update some input component behavior

User · Answer

you must do 4 following step     create event  var event   new Event  change        detail            oldValue yourValueVariable          newValue  yourValueVariable            bubbles  true      cancelable  true     event simulated   true  let tracker   this yourComponentDomRef  valueTracker  if  tracker        tracker setValue  yourValueVariable      bind value to component dom  this yourComponentDomRef value    yourValueVariable   bind element onchange to react onChange function   this yourComponentDomRef onchange    e   gt this props onChange e    dispatch event  this yourComponentDomRef dispatchEvent event      in above code yourComponentDomRef refer to master dom of your React component for example  lt div className  component-root-dom  ref   dom   gt  this yourComponentDomRef  dom   gt

User · Answer

I think you should change that like so    lt input value  this state value  onChange   e    gt   this handleChange e     gt    That is in principle the same as onClick  this handleClick bind this   as you did on the button    So if you want to call handleChange   when the button is clicked  than    lt button onClick  this handleChange bind this   gt Change Input lt  button gt    or  handleClick        this setState  value   another random text       this handleChange

[javascript] React: trigger onChange if input value is changing by state?

Examples related to javascript

Examples related to reactjs