i'm learning. 'onchange' event dropdown menu isn't working when converting code es5 es6 , don't see problem is. i've looked through "questions may have answer", nothing there. app compiles, there errors console. suspicion 'onchange' attribute in 'select' tag of child.js. i'd appreciate offered. here's code:
index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>react app</title> </head> <body> <div id="root"></div> </body> </html> index.js
import react 'react'; import reactdom 'react-dom'; import parent './parent'; reactdom.render( <parent />, document.getelementbyid('root') ); parent.js
import react 'react'; import child './child'; import sibling './sibling'; class parent extends react.component { constructor(props) { super(props); this.state = {name: 'frarthur'}; this.changename = this.changename.bind(this); } changename(newname) { this.setstate({name: newname}); } render() { return ( <div> <child onchange={this.changename} /> <sibling name={this.state.name} /> </div> ); } } export default parent; child.js
import react 'react'; class child extends react.component { handlechange(e){ let name = e.target.value; this.props.onchange(name); } render(){ return ( <div> <select id="great-names" onchange={() => this.handlechange()}> <option value="frarthur">frarthur</option> <option value="gromulus">gromulus</option> <option value="thinkpiece">thinkpiece</option> </select> </div> ); } } export default child; sibling.js
import react 'react'; class sibling extends react.component { render(){ let name = this.props.name; return ( <div> <h1>hey, name {name}!</h1> <h2>don't think {name} prettiest name ever?</h2> <h2>sure glad parents picked {name}!</h2> </div> ); } } export default sibling; console
uncaught typeerror: cannot read property 'indexof' of null @ content.js:4186 child.js:6uncaught typeerror: cannot read property 'target' of undefined @ child.handlechange (http://localhost:3000/static/js/bundle.js:32622:20) @ onchange (http://localhost:3000/static/js/bundle.js:32644:30) @ object.executeonchange (http://localhost:3000/static/js/bundle.js:24438:35) @ reactdomcomponent._handlechange (http://localhost:3000/static/js/bundle.js:24795:39) @ object.reacterrorutils.invokeguardedcallback (http://localhost:3000/static/js/bundle.js:16910:17) @ executedispatch (http://localhost:3000/static/js/bundle.js:16692:22) @ object.executedispatchesinorder (http://localhost:3000/static/js/bundle.js:16715:6) @ executedispatchesandrelease (http://localhost:3000/static/js/bundle.js:16103:23) @ executedispatchesandreleasetoplevel (http://localhost:3000/static/js/bundle.js:16114:11) @ array.foreach (native) child.js:6uncaught typeerror: cannot read property 'target' of undefined @ child.handlechange (http://localhost:3000/static/js/bundle.js:32622:20) @ onchange (http://localhost:3000/static/js/bundle.js:32644:30) @ object.executeonchange (http://localhost:3000/static/js/bundle.js:24438:35) @ reactdomcomponent._handlechange (http://localhost:3000/static/js/bundle.js:24795:39) @ object.reacterrorutils.invokeguardedcallback (http://localhost:3000/static/js/bundle.js:16910:17) @ executedispatch (http://localhost:3000/static/js/bundle.js:16692:22) @ object.executedispatchesinorder (http://localhost:3000/static/js/bundle.js:16715:6) @ executedispatchesandrelease (http://localhost:3000/static/js/bundle.js:16103:23) @ executedispatchesandreleasetoplevel (http://localhost:3000/static/js/bundle.js:16114:11) @ array.foreach (native)
you forgot pass event handlechange function, use this:
onchange={(e) => this.handlechange(e)} or this:
onchange={this.handlechange.bind(this)} 
Comments
Post a Comment