CODEWITHSUNDEEP
javascripthtmlreduxreactjs
Jo Ko
Jo Ko

Reputation: 7575

How to call methods in Parent component from Child component?

I have an element, a child component named <NormalTextField/>, but how can you call methods -- _handleFirstName and _handleLastName from its parent component <Home/>? I'm attempting to have the user enter in a text, and it would be sent off to create an object user in the Reducer that holds firstName and lastName.

In <Home/> I have the following:

  _handleFirstName(event){
    this.props.actions.updateFirstName(event.target.value)
  }

  _handleLastName(event){
    this.props.actions.updateLastName(event.target.value)
  }

render(){
 return(
  <NormalTextField
    hint='Enter First Name'
    onChange={this._handleFirstName.bind(this)}
    value={this.props.user.firstName}
  />

  <NormalTextField
    hint='Enter Last Name'
    onChange={this._handleLastName.bind(this)}
    value={this.props.user.lastName}
  />

Then in my element <NormalTextField/>,

import React, { Component } from 'react'

import { TextField } from 'material-ui'
import { orange900 } from 'material-ui/styles/colors'

class TextFieldLabel extends Component {
  static propTypes = {
    hint: React.PropTypes.string,
    onChange: React.PropTypes.func
  }

  _handle(event){
    this.props.onChange(event.target.value)
  }


  render() {
    var pr = this.props
    var hint = pr.hint
    var value = pr.value

    return (
      <TextField
        hintText={hint}
        onChange={this._handle.bind(this)}
        value={value}
      />
    )
  }
}

export default NormalTextField

But once the user enters in a text, I get the following error: Uncaught: TypeError: Cannot read property 'value' of undefined for _handleFirstName(event). What am I doing wrong? Is this the right approach and is it possible for Child component to call Parent's methods?

Upvotes: 1

Views: 193

Answers (1)

mnsr
mnsr

Reputation: 12437

The problem you're seeing is that you're passing event.target.value to _handleFirstName when it accepts event. You could just change _handle to this:

  _handle(event) {
    this.props.onChange(event)
  }

Or, ideally, you could remove the event handler in your NormalTextField, and just use the onChange prop directly.

Start with moving the bind calls to the constructor:

constructor() {
  super();
  this._handleFirstName = this._handleFirstName.bind(this);
  this._handleLastName= this._handleLastName.bind(this);
}

 _handleFirstName(event){
    this.props.actions.updateFirstName(event.target.value)
  }

  _handleLastName(event){
    this.props.actions.updateLastName(event.target.value)
  }

// remove .bind(this) from your onChange
render(){
 return(
  <NormalTextField
    hint='Enter First Name'
    onChange={this._handleFirstName}
    value={this.props.user.firstName}
  />

  <NormalTextField
    hint='Enter Last Name'
    onChange={this._handleLastName}
    value={this.props.user.lastName}
  />

Change your NormalTextField to this:

class TextFieldLabel extends Component {
  static propTypes = {
    hint: React.PropTypes.string,
    onChange: React.PropTypes.func
  }

  // _handle removed

  render() {
    var pr = this.props
    var hint = pr.hint
    var value = pr.value

    return (
      <TextField
        hintText={hint}
        onChange={this.props.onChange} // use prop directly
        value={value}
      />
    )
  }
}

Upvotes: 2

Related Questions