如何在类中从外部触发函数进行反应

Question

这是我为react数据表定义的列。在最后一列中，我试图从类外部触发btnCickedHandler函数。但现在它抛出了这样的错误->[TypeError:undefined没有属性]。

这意味着这个关键字不起作用。因为它不在课堂上。我发现了这个问题。但我真的需要在类中从外部触发该函数。

很抱歉出现语言问题。提前感谢！

const columns = [
{
name: "Ticket",
selector: "tkn",
sortable: true
},
{
name: "Ticket Date",
selector: "tdt",
sortable: true
},
{
name: "Client",
selector: "cna",
sortable: true
},
{
name: "Required By",
selector: "tun",
sortable: true
},
{
name: "Title",
selector: "ttt",
sortable: true
},
{
name: "Time Spent",
cell:(row) => (
<div>
<ReactTimeAgo date={!isNaN(toTimestamp(row.tsp))?toTimestamp(row.tsp):1900125000} locale="en-US" timeStyle="round"/>
</div>
),
sortable: true
},
{
name: "Progress",
selector: "pgs",
sortable: true
},
{
name: "Option",
cell:(row) => (
<UncontrolledButtonDropdown style={{width:'150px'}}>
<Button 
style={{width:'150px'}}
color={(row.tst == "0")?'danger':(row.tst == "2")?'primary':(row.tst == "3")?'success':(row.tst == "5")?'suspend':'warning'} 
className="btn-sm" 
onClick={ (e) => **this.btnClickedHandler**((row.tst == 0 || row.tst == 3)?2:(row.tst == 5)?5:1)} >{(row.tst == "0" || row.tst == "3")?'Preview': (row.tst == "5")?'Close':'Reply'}
</Button>

<DropdownToggle
className="dropdown-toggle-split"
color={(row.tst == "0")?'danger':(row.tst == "2")?'primary':(row.tst == "3")?'success':(row.tst == "5")?'suspend':'warning'}
caret
>
<ChevronDown size={15} />
</DropdownToggle>
<DropdownMenu style={{display:(row.tst == "0" || row.tst == "3")?'none':'', zIndex:2000}}>
<DropdownItem tag="a" onClick={ (e) => this.btnClickedHandler(2)} style={{display:(row.tst == "0" || row.tst == "3")?'none':''}}>Preview</DropdownItem>
<DropdownItem tag="a" onClick={ (e) => this.btnClickedHandler(3)} style={{display:(row.tst == "4" || row.tst == "0" || row.tst == "2" || row.tst == "3" || row.tst == "5")?'none':''}}>Create Task</DropdownItem>
<DropdownItem tag="a" onClick={ (e) => this.btnClickedHandler(4)} style={{display:(row.tst == "4" || row.tst == "0" || row.tst == "2" || row.tst == "3" || row.tst == "5")?'none':''}}>Finish</DropdownItem>
<DropdownItem tag="a" onClick={ (e) => this.btnClickedHandler(5)} style={{display:(row.tst == "4" || row.tst == "0" || row.tst == "1" || row.tst == "3" || row.tst == "5")?'none':''}}>Close</DropdownItem>
<DropdownItem tag="a" onClick={ (e) => this.btnClickedHandler(7)} style={{display:(row.tst != "1")?'none':''}}>Reject</DropdownItem>
<DropdownItem tag="a" onClick={ (e) => this.btnClickedHandler(6)} style={{display:(row.tst != "1")?'none':''}}>Terminate</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
),
ignoreRowClick: true,
allowOverflow: true,
button: true,
}
]

Answer 1

您可能会将btnClickedHandler作为参数传递给您的函数。

cell:(row, btnClickedHandler) => (
<UncontrolledButtonDropdown style={{width:'150px'}}>
<Button 
style={{width:'150px'}}
color={(row.tst == "0")?'danger':(row.tst == "2")?'primary':(row.tst == "3")?'success':(row.tst == "5")?'suspend':'warning'} 
className="btn-sm" 
onClick={ (e) => btnClickedHandler((row.tst == 0 || row.tst == 3)?2:(row.tst == 5)?5:1)} >{(row.tst == "0" || row.tst == "3")?'Preview': (row.tst == "5")?'Close':'Reply'}
</Button>

<DropdownToggle
className="dropdown-toggle-split"
color={(row.tst == "0")?'danger':(row.tst == "2")?'primary':(row.tst == "3")?'success':(row.tst == "5")?'suspend':'warning'}
caret
>
<ChevronDown size={15} />
</DropdownToggle>
<DropdownMenu style={{display:(row.tst == "0" || row.tst == "3")?'none':'', zIndex:2000}}>
<DropdownItem tag="a" onClick={ (e) => btnClickedHandler(2)} style={{display:(row.tst == "0" || row.tst == "3")?'none':''}}>Preview</DropdownItem>
<DropdownItem tag="a" onClick={ (e) => btnClickedHandler(3)} style={{display:(row.tst == "4" || row.tst == "0" || row.tst == "2" || row.tst == "3" || row.tst == "5")?'none':''}}>Create Task</DropdownItem>
<DropdownItem tag="a" onClick={ (e) => btnClickedHandler(4)} style={{display:(row.tst == "4" || row.tst == "0" || row.tst == "2" || row.tst == "3" || row.tst == "5")?'none':''}}>Finish</DropdownItem>
<DropdownItem tag="a" onClick={ (e) =>  btnClickedHandler(5)} style={{display:(row.tst == "4" || row.tst == "0" || row.tst == "1" || row.tst == "3" || row.tst == "5")?'none':''}}>Close</DropdownItem>
<DropdownItem tag="a" onClick={ (e) => btnClickedHandler(7)} style={{display:(row.tst != "1")?'none':''}}>Reject</DropdownItem>
<DropdownItem tag="a" onClick={ (e) => btnClickedHandler(6)} style={{display:(row.tst != "1")?'none':''}}>Terminate</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
),