Question

我正在尝试从我的父组件调用我的嵌套组件功能，并且我继续将以下错误返回到我的控制台：

未捕获的TypeError：this.props.handleTouchTap不是函数

我个人在与.props斗争，我想这是一个简单的错误修复，但由于某种原因，我似乎无法弄清楚我必须做什么。

我希望我的代码能做的是： - 当用户更新他们的信息时，在将更新发布到Firebase之后，我希望弹出一个材料-ui snackbar来说明这一点。 - 我已经在子组件中声明了快餐栏，它正在工作。我无法做的是从父组件切换控制零食店的状态。

React Routes：

ReactDOM.render((
  <Router history={hashHistory}>
    <Route component={Profile}>
      <Route path="/profile" component={Child} />
    </Route>
  </Router>
), document.getElementById("app"))

子组件：

export default class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      message: "Update Successful!!",
    };
  }

  handleTouchTap(){
    this.setState({
      open: true,
    });
  };

  handleRequestClose(){
    this.setState({
      open: false,
    });
  };


  render() {
    return (
          <MuiThemeProvider muiTheme={muiTheme}>
            <div>
                <NavBar />
                <Drawer />
                <Snackbar
                  open={this.state.open}
                  message={this.state.message}
                  autoHideDuration={4000}
                  onRequestClose={this.handleRequestClose}
                />
            </div>
        </MuiThemeProvider>
    );
  }
}

父组件：

export default React.createClass({
  getInitialState: function () {
    return {
      name: '',
      surname: '',
      address: '',
      phone: '',
      email: '',
    }
  },

  componentWillMount(){
    this.getUserDetails();
  },

  getUserDetails: function(){
    var personID = this.param('id'); 
    if(personID.length > 0){
      new Firebase('https://xxxxxxxxxxxxx.firebaseio.com/users/' + personID).on('value', function(snap) {
       this.setState({
          name: snap.val().Name,
          surname: snap.val().Surname,
          address: snap.val().Address,
          phone: snap.val().Phone,
          email: snap.val().Email
        });

      }.bind(this));
     }
  },

  updateDetails: function(){
    var personID = this.param('id'); 
    if(personID.length > 0){
      firebase.database().ref('users/' + personID).update({
          Name: this.state.name,
          Surname: this.state.surname,
          Address: this.state.address,
          Phone: this.state.phone,
          Email: this.state.email
      });
      this.props.handleTouchTap();
     }
  },

  render() {
    return (
      <div>
        <div>{this.props.children}</div>
         ....
        <Button bsStyle="primary" onClick={this.updateDetails}>Update</Button> 
         ....
         ...
      </div>
    );
  }
});

ReactJS - React Router从父组件调用嵌套组件中的函数

0 个答案: