Question

我想由孩子调用父函数。

父类。

在这里，我有一个动作数组，该数组正在子级中创建列（例如：Edit列，其作为图标），我想调用当用户单击编辑图标时，其父级的onEditClick函数。

onEditClick() {
    // this method should be called via child
}

render() {
    return (
      <Child
        actions={[
          {
            name: "Edit",
            icon: (
              <Tooltip title="Delete" className={classes.pointerStyle}>
                <Edit />
              </Tooltip>
            ),
            handler: "onEditClick"
          },
          {
            name: "Delete",
            icon: (
              <Tooltip title="Delete" className={classes.pointerStyle}>
                <DeleteIcon />
              </Tooltip>
            ),
            handler: "onDeleteClick"
          }
        ]}
      />
    );
}

//Child class
render() {
    return actions.map(col => (
      <TableCell style={{ marginLeft: "5px" }}>
        {col.icon} // here click event will occur
      </TableCell>
    ));
}

Answer 1

您可以从子组件中调用父函数。您只需要使用prop从父组件传递回调方法，并从子组件传递该方法。这是一个示例：

parent.js：

onEditClick = () =>{}
render(){
  return(
  <child onEditClick={this.onEditClick}/>
)}

在Child.js中：

 render(){
   return(
   <button onClick={this.props.onEditClick} />
 )}

Answer 2

这很容易做到，也很普遍。您必须首先将功能作为道具传递给子组件。一旦成为道具，您可以在子组件中访问它。像这样：

<Child parentFunction={this.onEditClick}>

然后访问子组件内部：

this.props.parentFunction

无论选择什么道具名称，都可以访问在道具内部指定的功能。

Answer 3

您可以执行以下操作。您可以将onEditClick和onDeleteClick函数作为处理程序从父操作数组中的父级传递给子组件，并且可以将图标包装在按钮内，然后将该处理程序传递给按钮的onPress

    onEditClick = () => {}
    onDeleteClick = () => {}

    render() {
       return (
          <Child                
             actions={[
               {
                 name: 'Edit',
                 icon: <Tooltip title="Delete" className={classes.pointerStyle}>
                            <Edit />
                        </Tooltip>,
                 handler: this.onEditClick
                },
                {
                  name: 'Delete',
                  icon: <Tooltip title="Delete" className={classes.pointerStyle}>
                            <DeleteIcon />
                        </Tooltip>,
                  handler: this.onDeleteClick
                 }]
                }

            />
        );
}

// Child class
     render() {
        return (
           this.props.actions.map(col => (
                <TableCell style={{ marginLeft: '5px'}}>
                   <Button onPress={col.handler}> 
                     <View>{col.icon}</View>
                   </Button> 
                 </TableCell>
            )
           )                                         
        );
}

通过子调用父函数-React

3 个答案: