如何從子組件中調用父組件中的方法？

Question

我有一個元素，一個名爲<NormalTextField/>的子組件，但是如何從其父組件<Home/>調用方法_handleFirstName和_handleLastName？我正在嘗試讓用戶輸入文本，並將其發送到Reducer中創建一個對象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組件可以調用Parent的方法嗎？

Answer 1

您看到的問題是，當您接受event時，您將通過event.target.value至_handleFirstName。你可以只改變_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} 
     /> 
    ) 
    } 
}