Wie Methoden in Parent-Komponente von Child-Komponente aufgerufen werden?

Question

Ich habe ein Element, eine untergeordnete Komponente mit dem Namen <NormalTextField/>, aber wie können Sie Methoden aufrufen - _handleFirstName und _handleLastName von seiner übergeordneten Komponente <Home/>? Ich versuche, den Benutzer einen Text eingeben zu lassen, und es würde gesendet, um ein Objekt user in dem Reducer zu erstellen, der firstName und lastName enthält.

In <Home/> Ich habe folgendes:

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

Dann in meinem 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 

Aber sobald der Benutzer in einem Text eingibt, erhalte ich folgende Fehlermeldung: Uncaught: TypeError: Cannot read property 'value' of undefined für _handleFirstName(event). Was mache ich falsch? Ist dies der richtige Ansatz und ist es möglich, dass die Child-Komponente die Methoden von Parent aufruft?

Answer 1

Das Problem, das Sie sehen, besteht darin, dass Sie event.target.value an _handleFirstName übergeben, wenn es event akzeptiert. Sie könnten nur _HANDLE Um dies zu ändern:

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

oder idealerweise Sie den Event-Handler in Ihrer NormalTextField versetze, die nur direkt prop verwenden onChange.

beginnen mit der bind Anrufe an den Konstruktor zu bewegen:

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

ändern NormalTextField dazu:

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