자식 구성 요소에서 부모 구성 요소의 메서드를 호출하는 방법은 무엇입니까?

Question

하위 구성 요소가 <NormalTextField/>인데 부모 구성 요소 인 <Home/>에서 _handleFirstName과 _handleLastName을 어떻게 호출 할 수 있습니까? 나는 사용자가 텍스트를 입력하려고 시도하고 있으며 firstName 및 lastName을 보유하는 감속기에 user 오브젝트를 생성하기 위해 전송됩니다. <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 

에 그러나 사용자가 텍스트를 입력하면, 나는 다음과 같은 오류가 발생합니다 : _handleFirstName(event)에 대한 Uncaught: TypeError: Cannot read property 'value' of undefined을. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 이것이 올바른 접근 방법이며 하위 구성 요소가 부모 메소드를 호출 할 수 있습니까?

Answer 1

표시되는 문제는 event을 수락하면 event.target.value을 _handleFirstName으로 전달한다는 것입니다.

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

을 또는 이상적으로, 당신은 당신의 NormalTextField에 이벤트 핸들러를 제거 할 수 있습니다, 그냥 직접 소품 onchange를를 사용 : 당신은이에 _handle 변경 될 수 있습니다.

시작 생성자에 바인드 호출을 움직이는 :

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

:

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 변경