如何从子组件调用父组件中的方法

How to call methods in Parent component from Child component?

本文关键字：组件 方法 调用      更新时间：2023-09-26

我有一个元素，一个名为<NormalTextField/>的子组件，但如何从其父组件<Home/>调用方法_handleFirstName和_handleLastName？我正试图让用户输入一个文本，它将被发送到Reducer中创建一个包含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

但是，一旦用户输入文本，我就会得到以下错误：Uncaught: TypeError: Cannot read property 'value' of undefined代表_handleFirstName(event)。我做错了什么？这是正确的方法吗？Child组件是否可以调用Parent的方法？

您看到的问题是，当event.target.value接受event时，您正在将其传递给_handleFirstName。您可以将句柄更改为：（_H）

  _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}
      />
    )
  }
}
相关文章：