[英]How to call methods in Parent component from Child component?
我有一个元素,一个名为<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)
Uncaught: TypeError: Cannot read property 'value' of undefined
。 我究竟做错了什么? 这是正确的方法吗?Child组件可以调用Parent的方法吗?
你看到的问题是,你传递event.target.value
到_handleFirstName
在受理event
。 您可以将_handle更改为此:
_handle(event) {
this.props.onChange(event)
}
或者,理想情况下,您可以在NormalTextField
删除事件处理程序,而直接使用onChange NormalTextField
。
首先将绑定调用移至构造函数:
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}
/>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.