Passing an optional parameter with the onChange event

Question

What am I trying to do:

I am trying to pass a string from a child component to the handleChange function of the parent component.

What is currently working:

I have a React JS parent class with the following method:

handleChange(event) {

    console.log(event.target.value);
}

In the rendering 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 great.

What am I trying to do instead:

I am trying to add a parameter sectionto 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>

Now I get the error:

Uncaught TypeError: Cannot read property 'target' of undefined

This error occurs in my second console.log statement.

What am I doing wrong?

, section. , ? , , .

Answer 1

:

<fieldset onChange={this.props.handleChange("tags")}>

handleChange , .

:

<fieldset onChange={(e) => this.props.handleChange("tags", e)}>

handleChange , onChange.

Answer 2

OP, , , , , :

Ritesh Bansal :

, , , :

<fieldset onChange={this.props.handleChange("tags")}>

, :

<fieldset onChange={this.props.handleChange()}>

.

:

:

<fieldset onChange={this.props.handleChange.bind(this, "tags")}>

:

<fieldset onChange={(evt) => this.props.handleChange("tags", evt)}>

. !

:

, :

<Child handleChange={(e,val) => this.handleChange(e, val)}/>

, bind , , . .

Answer 3

:

<fieldset onChange={(e) => this.props.handleChange("tags", e)}>
    <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>

Answer 4

To pass a parameter from a child component to a parent, you can accept an argument to the arrow function.

handleChange(event, section) {
    console.log(section);
    console.log(event.target.value);
}
<Child handleChange={(e, val) => this.handleChange(e, val)} />

<fieldset onChange={(e) => this.props.handleChange(e, "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>

Fragment Example

class App extends React.Component {
  handleChange(e, val) {
    console.log(e.target.value, val);
  }
  render() {
    return(
      <Child handleChange={(e,val) => this.handleChange(e, val)}/>
    )
  }
}

class Child extends React.Component {
  
  render() {
    return(
      <input type="text" onChange={(e) => this.props.handleChange(e, 'tab')}/>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Run codeHide result