reactjs - Higher Order Component - listening for onChange -

i'm working on hoc forms in react app (for practice).

// components/wrapper.js import react 'react';  export default wrappedcomponent => class extends react.component {   constructor() {     super();      this.onsubmit = this.onsubmit.bind(this);     this.onchange = this.onchange.bind(this);   }    onchange(e) {     console.log(e.target.value);   }    onsubmit(e) {     e.preventdefault();     console.log("submitting form...");   }    render() {     return <wrappedcomponent {...this.props} onsubmit={this.onsubmit} onchange={this.onchange}/>;   } }; 

and export main index file using:

export wrapper './components/wrapper'; 

then can do:

// loginpage.js import { wrapper } '../somewhere'    ... <form onsubmit={this.props.onsubmit}>   <label>email address</label>   <input type="text" name="email" onchange={this.props.onchange}/>   <label>password</label>   <input type="password" name="password" onchange={this.props.onchange}/>   <input type="submit" value="login"/> </form> ... 

and wrap using:

export default wrapper(loginpage); 

i'm trying make easy use possible (as others may make use if it). therefore, want able remove onchange props in input boxes , somehow build functionality in onchanges detected automatically hoc.

how can build component can used input boxes have onchange added automatically?

you need wrap html element input in react component, , set defaultprops: onchange: () => {}, , define other props input type etc...

and markdown inputs components:

` <form onsubmit={this.props.onsubmit}>   <custominput type="text" label="login" .../> </form> `