Question

我的React应用程序中有两个组件（表组件和用户组件）。我的一个组件中的表中有多个用户数据。单击按钮时，我需要将用户ID从表组件传递到用户组件。问题是当我从表组件中调用属性时，它在控制台中显示 this.props.onClick is not a function 错误。我该怎么解决？

表组件：

class EnhancedTable extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      userID: 10
    };
    this.sendUserId = this.sendUserId.bind(this);
  }

  sendUserId() {
    this.props.onClick(this.state.userID);
  }
  render() {
    return (
       <button onClick={this.sendUserId}>
           <BorderColorIcon className="action margin-r" />
       </button>
    )
  }
}

用户组件：

Import EnhancedTable from './EnhancedTable';

class Users extends Component {

  constructor(props) {
    super(props);
    this.state = {
      userID: 5
    };
    this.onFillForm = this.onFillForm.bind(this);
   }

  onFillForm(idd) {
    this.setState({
      userID : idd
    })
  }

  render() {
     return(
         <span onClick = {this.onFillForm} className="mainUserDivTitle">{this.state.userID}</span>
     )
   }
}

Answer 1

假设：EnhancedTable是子组件，而User是父组件。

您的代码存在问题：您尚未调用Child组件，因此EnhancedTable不会获得this.props.onClick。

您需要像这样调用EnhancedTable：

<EnhancedTable onClick = {this.onFillForm} />

Answer 2

您需要致电<EnhancedTable />而不是<span />

在用户组件中

import React, { Component } from 'react';

import EnhancedTable from './EnhancedTable';

class Users extends Component {

  constructor(props) {
    super(props);
    this.state = {
      userID: 5
    };
    this.onFillForm = this.onFillForm.bind(this);
   }

  onFillForm(idd) {
    this.setState({
      userID : idd
    })
  }

  render() {
     return(
         <>
           <div className="mainUserDivTitle">{this.state.userID}</div>
           <EnhancedTable onClick={this.onFillForm} />
         </>
     )
   }
}

export default Users;

如何在React的子组件和父组件之间共享数据？

2 个答案: