Как вызвать методы в родительском компоненте из дочернего компонента?

Question

У меня есть элемент, дочерний компонент с именем <NormalTextField/>, но как вы можете назвать методы - _handleFirstName и _handleLastName от его родительского компонента <Home/>? Я пытаюсь ввести пользователя в текст, и он будет отправлен для создания объекта user в редукторе, который содержит firstName и lastName.

В <Home/> я следующее:

_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} 
    /> 

Тогда в моем элементе <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 

Но как только пользователь вводит в текст, я получаю следующее сообщение об ошибке: Uncaught: TypeError: Cannot read property 'value' of undefined для _handleFirstName(event). Что я делаю не так? Является ли это правильным подходом и возможно ли, чтобы компонент Child вызывал методы родителя?

Answer 1

Проблема, которую вы видите, это то, что вы проходите event.target.value до _handleFirstName, когда она принимает event. Вы можете просто изменить _handle к этому:

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

Или, в идеале, вы можете удалить обработчик события в вашем NormalTextField, и просто использовать OnChange проп непосредственно.

Начните с перемещения связываемых вызовы конструктора:

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} 
    /> 

Изменить NormalTextField к этому:

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} 
     /> 
    ) 
    } 
}