Question

如何从父组件调用子组件函数？我试过使用refs，但无法正常工作。我收到类似无法读取未定义属性'handleFilterByClass'的错误。

路径：Parent Component

 export default class StudentPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  newStudentUserCreated() {
    console.log('newStudentUserCreated1');
    this.refs.studentTable.handleTableUpdate();
  }

  render() {
    return (
      <div>
        <StudentTable
          studentUserProfiles={this.props.studentUserProfiles}
          ref={this.studentTable}
        />
      </div>
    );
  }
}

路径：StudentTable

export default class StudentTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     studentUserProfiles: props.studentUserProfiles,
    };

    this.handleTableUpdate = this.handleTableUpdate.bind(this);
  }

  handleTableUpdate = () => (event) => {
    // Do stuff
  }

  render() {
    return (
      <div>
       // stuff
      </div>
    );
  }
}

更新路径StudentContainer

export default StudentContainer = withTracker(() => {
  const addStudentContainerHandle = Meteor.subscribe('companyAdmin.addStudentContainer.userProfiles');
  const loadingaddStudentContainerHandle = !addStudentContainerHandle.ready();
  const studentUserProfiles = UserProfiles.find({ student: { $exists: true } }, { sort: { lastName: 1, firstName: 1 } }).fetch();
  const studentUserProfilesExist = !loadingaddStudentContainerHandle && !!studentUserProfiles;

  return {
    studentUserProfiles: studentUserProfilesExist ? studentUserProfiles : [],
  };
})(StudentPage);

Answer 1

我的设计是：组件（孩子1）创建一个新的StudentProfile。通知父组件...然后告诉组件（子组件2）运行一个函数以更新表数据的状态。

我在这里解释OP的评论，但似乎基本想法是让子组件更新同级子。

一种解决方案是使用refs。

在此解决方案中，我们让Parent通过道具将函数传递给ChildOne。当ChildOne调用Parent时，然后通过ref调用ChildTwo的{{1}}函数。

文档：https://reactjs.org/docs/refs-and-the-dom.html

演示（打开控制台可查看结果）：https://codesandbox.io/s/9102103xjo

updateTable

从父级调用子级组件函数

1 个答案: