Question

我正在使用 react-bootstrap-table-next 创建一个表。 columns 中有 BootstrapTable 道具，它接受一个数组。我想将 columns 数组 保存在一个单独的文件中，因为将来数组会太大。

当用户点击 text-3 字段时，onClick 函数起作用。但是我也想在 home.tsx 中看到这个，因为我将使用这些数据。我需要的是在 column.tsx 中触发时在 home.tsx 中的某处触发。触发后，我将在 home.tsx 中使用该数据。我该怎么做？

home.tsx

import React from 'react'
import BootstrapTable from 'react-bootstrap-table-next'
import { dataColumns } from '../../columns/columns'
import { homeData} from '../../data/data'

const Home: React.FC = () => {

const triggeredFunction = () => {
 //I want this function triggered
}
return (
         <BootstrapTable
              bordered
              striped
              hover
              columns={dataColumns}
              data={homeData}
         />
)
}

export default Home

columns.tsx

import React from 'react'

export const dataColumns = [
      {
         text: 'text-1',
         dataField: 'text1'
      },
      {
         text: 'text-2',
         dataField: 'text2'
      },
      {
         text: 'text-3'
         dataField: 'text3',
         events: {
              onClick: (e:any, row:any) => {
                 //This is the first triggered function
                 return {
                        e:e,
                        row: row
                 }
              }
         }
      }
]

Answer 1

您可以在 props 中传递该函数。并且可以将该函数调用为 onClick = {props.myFunction()}。希望可以帮到你

如何从 Reactjs 中的另一个文件触发函数

1 个答案: