Menu
What I'm trying to do:
I am trying to pass a string from a child component to the handleChange function of a parent component.
What currently works:
I have a parent React JS class with the following method:
handleChange(event) { console.log(event.target.value); } In the render function I have the following:
<Child handleChange={this.handleChange.bind(this)} /> In the Child class I have:
<fieldset onChange={this.props.handleChange}> <div>Tag 1: <input id="tag1" value={tags[0]} /></div> <div>Tag 2: <input id="tag2" value={tags[1]} /></div> <div>Tag 3: <input id="tag3" value={tags[2]} /></div> </fieldset> This works fine.
What I am trying to do instead:
I am attempting to add a section parameter to the handleChange function as follows:
handleChange(section, event) { console.log(section); console.log(event.target.value); } And in the Child class I have:
<fieldset onChange={this.props.handleChange("tags")}> <div>Tag 1: <input id="tag1" value={tags[0]} /></div> <div>Tag 2: <input id="tag2" value={tags[1]} /></div> <div>Tag 3: <input id="tag3" value={tags[2]} /></div> </fieldset> I now get the error:
Uncaught TypeError: Cannot read property 'target' of undefined This error is being thrown in my second console.log statement.
What am I doing wrong?
Also, I am considering making the section parameter optional. If so, is there an easy way to do this? It seems like it might not be possible if the event parameter needs to be last.
585
You can only assign a handler to onChange once. When you use multiple assignments like that, the second one will overwrite the first one.
Passing the event object of react as the second argument. If you want to pass a parameter to the click event handler you need to make use of the arrow function or bind the function. If you pass the argument directly the onClick function would be called automatically even before pressing the button.
In order to pass a value as a parameter through the onClick handler we pass in an arrow function which returns a call to the sayHello function. In our example, that argument is a string: 'James': ... return ( <button onClick={() => sayHello('James')}>Greet</button> ); ...
When you are writing this:
<fieldset onChange={this.props.handleChange("tags")}> handleChange will be called immediately as soon as render is triggered.
Instead, do it like this:
<fieldset onChange={(e) => this.props.handleChange("tags", e)}> Now the handleChange will be called when onChange handler is called.
113
In your handle event use double arrow function, there's no need to bind when using arrow function:
handleChange = tags => (event) => { console.log(tags); console.log(event.target.value); } And in the Child:
<fieldset onChange={this.props.handleChange("tags")}> <div>Tag 1: <input id="tag1" value={tags[0]} /></div> <div>Tag 2: <input id="tag2" value={tags[1]} /></div> <div>Tag 3: <input id="tag3" value={tags[2]} /></div> </fieldset> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
