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

我有一个元素，一个名为

的子组件，但是如何从其父组件

调用方法--

\u handleFirstName

和

\u handleLastName

？我正试图让用户输入一个文本，它将被发送到保存

firstName

和

lastName

的Reducer中创建一个对象

user

在

中，我有以下内容：

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

\u handleFirstName（事件）{
this.props.actions.updateFirstName（event.target.value）
}
_handleLastName（事件）{
this.props.actions.updateLastName（event.target.value）
}
render（）{
返回(

然后在我的元素

中

import React，{Component}来自“React”
从“材质ui”导入{TextField}
从“材质ui/样式/颜色”导入{orange900}
类TextFieldLabel扩展组件{
静态类型={
提示：React.PropTypes.string，
onChange:React.PropTypes.func
}
_句柄（事件）{
this.props.onChange（event.target.value）
}
render（）{
var pr=this.props
var hint=pr.hint
var值=pr.value
返回(
)
}
}
导出默认NormalTextField

---

但是一旦用户输入文本，我就会得到以下错误：

Uncaught:TypeError:无法读取
\u handleFirstName（事件）的未定义的属性“value”
。我做错了什么？这是正确的方法吗？子组件是否可以调用父组件的方法？
您看到的问题是，当它接受
事件时，您正在将
event.target.value
传递给
\u handleFirstName
。您可以将句柄更改为：

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

constructor（）{
超级（）；
this.\u handleFirstName=this.\u handleFirstName.bind（this）；
this.\u handleLastName=this.\u handleLastName.bind（this）；
}
_handleFirstName（事件）{
this.props.actions.updateFirstName（event.target.value）
}
_handleLastName（事件）{
this.props.actions.updateLastName（event.target.value）
}
//从onChange中删除.绑定（此）
render（）{
返回(

将您的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}
      />
    )
  }
}

class textfieldlab扩展组件{
静态类型={
提示：React.PropTypes.string，
onChange:React.PropTypes.func
}
//_取下手柄
render（）{
var pr=this.props
var hint=pr.hint
var值=pr.value
返回(
)
}
}

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