Question

我在两个不同的组件中有两个名为 selectall 的按钮。在 Acompoent 中，我有 selectall 按钮及其 selectall 功能。我试图从 Bcompoent 调用这个 selectall 函数。这里 Bcompoent 和 Acompoent 与 Ccompoent 有关系。谁能告诉我如何从 Bcompoent 触发 selectAll。

辅助

 selectAll={selectAll}

  const selectAll = (e) => { console.log ("selectAll")}

Answer 1

class Parent extends React.Component {
selectAll = (e) => { console.log ("selectAll")}

render () {
return(
<Child eyeColor={selectAll} />
)
}
}
class Child extends React.Component {
render () {
return(
 <div style={{backgroundColor: this.props.eyeColor} />
)
}
}

或者你可以试试这个<Child eyeColor={selectAll()} />

Answer 2

为此，您需要将一个方法从父组件传递给 A 和 B 组件，如下所示：

class Parent extends React.Component{
 .
 .
 .
 selectAll = (data) => {
  console.log({data});
 }

 render(){
  return(
   <ComponentA selectAll={this.selectAll}  />
   <ComponentB selectAll={this.selectAll} />
  )
 }
}



class ComponentA extends React.Component{
 .
 .
 .
 render(){
  return(
    <button onClick={() => this.props.selectAll(data)>click me</button>
  )
 }
}

class ComponentB extends React.Component{
 .
 .
 .
 render(){
  return(
    <button onClick={() => this.props.selectAll(data)>click me</button>
  )
 }
}

Answer 3

如果您有可重用的函数，请使用这些函数创建另一个组件（Util 组件）并导出您需要重用的所有函数。

Utils.js 文件

import React from 'react'

function reUseFun1(/*parameters*/) {
   //f1 body
}

function reUseFun2(/*parameters*/) {
   //f2 body
}

export {
   reUseFun1,
   reUseFun2
}

当一个util函数需要使用时

import  React from 'react';
import Utils from './Utils';

function Component() {
       return(
            <button onClick={Utils.reUseFun1(/*parameters*/)}> Cick Here </button>
       )
}
export default Component;

反应功能组件从另一个组件调用函数

3 个答案: