ReactJS - 从外部调用函数

我使用antd作为我的UI框架。我试图从类外部调用一个在类中声明的函数，我该怎么做？ReactJS - 从外部调用函数

const columns = [ 
{ 
     title: 'Action', 
     dataIndex: 'action', 
     key: 'action', 
     render: (text, record, index) => { 
      if (record.status === 'error') { 
       return <a className='error-text' href="#">{text} &raquo;</a> 
      } else if (record.status === 'draft') { 
       return <a href="#" onClick={(e) => { e.stopPropagation(); showModal(record.id); } }><Icon type="delete" /> Delete</a> 
      } else if (record.status === 'progress') { 
       return 'N/A' 
      } else { 
       return <a href="#">{text} &raquo;</a> 
      } 
     } 
] 

class OnBoard extends Component { 
    constructor(props) { 
      super(props); 
      this.state = { 
       modalVisible: false 
      } 
    } 

    showModal = (id) => { 
     console.log('i am clicking id: '+id); 
    } 

    render() { 
     return (
      <Base page={this.props.location.pathname} title="TOUR LIST"> 
       <div id="dashboard"> 
        <Table 
         style={{clear: 'both'}} 
         dataSource={this.state.data} 
         columns={columns} 
         loading={this.state.loading} 
         pagination={this.state.pagination} 
         onChange={this.handleTableChange} 
        /> 
        <Modal 
         title="Delete Tour" 
         visible={this.state.modalVisible} 
         onOk={this.handleOk} 
         okText="Confirm" 
         cancelText="Cancel" 
         onCancel={this.handleCancel} 
         > 
         <p>Please confirm you would like to delete the Tour: blablah.xls</p> 
        </Modal> 
       </div> 
      </Base> 
     ); 
    }

错误： '的ShowModal' 没有定义没有民主基金

我试图将其更改为：

showModal(id){ 
    console.log('i am clicking id: '+id); 
}

但我仍然得到了同样的错误。

我已经添加了渲染功能以显示更广泛的上下文。

来源

2017-10-10 Elliot Reeve

你不能。你当前的设置没有对类实例的引用，如果你在这个渲染函数中有一个这样的上下文，你应该检查它是否是你的OnBoard类，那么你应该可以用' this.showModal'。任何你可以创建一个MCVE – Icepickle

的机会你可以在你尝试调用'showModal'的地方添加代码吗？ –

@Ippickle我添加了更多上下文的渲染函数。 –

-1

声明该函数为静态。

class ComponentA extends React.Component { 
    static getSomething() { 
    return 'this is returned from getSomething function'; 
    } 
    render() { 
    return <div>Component A</div>; 
    } 
} 

class ComponentB extends React.Component { 
    render() { 
    return (
     <div> 
     <h3>Component B</h3> 
     <h4>function ComponentA.getSomething:</h4> 
     <p>{ComponentA.getSomething()}</p> 
     </div> 
    ); 
    } 
}

请看下面的例子：

https://codesandbox.io/s/zk3m3n4zzx

来源

2017-10-10 11:38:04

如果我将其定义为静态，那么我可以引用“this”？ –

*不能 - 错字修正 –

你是对的，你不能......然后另一种选择是创建类并得到实例... –

您应该创建接受showModal功能设置了一个param功能：

function getColumns (showModal) { 
    return [ 
     { 
      title: 'Action', 
      dataIndex: 'action', 
      key: 'action', 
      render: (text, record, index) => { 
       record.status === 'error' && return <a className='error-text' href="#">{text} &raquo;</a>; 
       record.status === 'draft' && return <a href="#" onClick={ e => { e.stopPropagation(); showModal(record.id); } }><Icon type="delete"/>Delete</a>; 
       record.status === 'progress' && return 'N/A'; 
       return <a href="#">{text} &raquo;</a>; 
      } 
     } 
    ] 
}

在渲染（）：

<Table 
    style={{clear: 'both'}} 
    dataSource={this.state.data} 
    columns={getColumns(this.showModal)} 
    loading={this.state.loading} 
    pagination={this.state.pagination} 
    onChange={this.handleTableChange} 
/>

来源

2017-10-10 17:49:34

我解决了这个问题，只需将const移动到Class中，并将其引用为this.columns []。正常情况下，我能够完成其余的工作。

感谢您的帮助！

来源

2017-10-12 10:31:07

ReactJS - 从外部调用函数

回答

相关问题