如何在 class 反应中从外部触发功能

Question

这是我对反应数据的列定义 table。在最后一列中，我试图从 class 外部触发 btnClickedHandler 函数。但现在它抛出这样的错误 -> [TypeError: undefined has no properties].

这意味着该关键字无效。因为它不在 class 内。我发现了那个问题。但我真的需要在 class.

中从外部触发该功能

对于语言问题，我们深表歉意。提前致谢！

 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>
        ),

如何在 class 反应中从外部触发功能

how to trigger function from outside in the class react

reactjs

react-data-table-component