无法使 onClick 在 ReactJS 中工作

Posted 2023-02-22

【中文标题】无法使 onClick 在 ReactJS 中工作

【英文标题】：Not able to make onClick to work in ReactJS

【发布时间】：2020-01-13 04:20:55

【问题描述】：

我在 reactJS 应用程序中使用 PrimeReact。

onClick 没有触发我调用 this.onEdit 的编辑按钮 我也在构造函数中绑定了这个

import React,  Component  from "react";
import PropTypes from "prop-types";

import  DataTable  from "primereact/datatable";
import  Column  from "primereact/column";
import  Button  from "primereact/button";
import  Dialog  from "primereact/dialog";
import  InputText  from "primereact/inputtext";

import PricingParameterService from "../../../services/PricingParameterService";

export default class SearchPriceParameters extends Component 
  constructor() 
    super();
    this.pricingParameterService = new PricingParameterService();
    this.onEdit = this.onEdit.bind(this);
    this.state = 
      error: null,
      isLoaded: false,
      rows: [],
      row: ,
      displayDialog: false
    ;
  

  componentDidMount() 
    this.pricingParameterService
      .getAllPricingParameters()
      .then(response => 
        this.setState( error: null, isLoaded: true, rows: response.data );
      )
      .catch(error => 
        console.log("error : ", error);
        this.setState( error: error, isLoaded: true, rows: [] );
      );
  

  // static propTypes = 
  //     prop: PropTypes
  // 

  // Edit action
  onEdit(e) 
    alert("clicked..");
    console.log("Edit clicked" + e);
  

  actionTemplate(rowData, column) 
    return (
      <div>
        <Button
          type="button"
          icon="pi pi-pencil"
          className="p-button-warning"
          style= marginRight: ".5em" 
          onClick=this.onEdit
        ></Button>
        <Button
          type="button"
          icon="pi pi-trash"
          className="p-button-danger"
        ></Button>
      </div>
    );
  

  render() 
    const  error, isLoaded, rows  = this.state;

    const rowsCount = rows ? rows.length : 0;
    let header = (
      <div>
        <b>Pricing Parameters</b>
      </div>
    );
    let footer = <div>There are rowsCount records(s) </div>;

    let dialogFooter = (
      <div className="ui-dialog-buttonpane p-clearfix">
        <Button label="Delete" icon="pi pi-times" onClick=this.delete />
        <Button label="Save" icon="pi pi-check" onClick=this.save />
      </div>
    );

    if (error) 
      return <div>Error : error</div>;
     else if (!isLoaded) 
      return <div>Loading...</div>;
     else 
      return (
        <div>
          <DataTable
            value=rows
            paginator=true
            rows=20
            rowsPerPageOptions=[5, 10, 20, 50]
            autoLayout=true
            header=header
            footer=footer
          >
            /* <Column field="i" header="#" /> */
            <Column field="paramCode" header="Code" sortable=true />
            <Column field="paramDesc" header="Description" sortable=true />
            <Column field="paramValue" header="Value" sortable=true />
            <Column
              header="Edit / Delete"
              body=this.actionTemplate
              style= textAlign: "center", width: "8em" 
            />
          </DataTable>

          <Dialog
            visible=this.state.displayDialog
            style= width: "600px" 
            header="Price Parameter Details"
            modal=true
            footer=dialogFooter
            onHide=() => this.setState( displayDialog: false )
            blockScroll=false
          >
            this.state.row && (
              <div className="p-grid p-fluid">
                <div className="p-col-4" style= padding: ".75em" >
                  <label htmlFor="paramCode">Code</label>
                </div>
                <div className="p-col-8" style= padding: ".5em" >
                  <InputText
                    id="paramCode"
                    onChange=e => 
                      this.updateProperty("paramCode", e.target.value);
                    
                    value=this.state.row.paramCode
                  />
                </div>
              </div>
            )
          </Dialog>
        </div>
      );
    
  

用户界面：-

更新：-

如果我将按钮直接放在 render() 中，它就可以工作。 但由于这是为每一行生成的动态按钮，并且代码在外部，因此似乎无法正常工作。不知道如何处理。

【问题讨论】：

这应该有效。你试过箭头函数吗？

【参考方案1】：

你必须在构造函数中绑定actionTemplate方法：

this 指的是document，这就是它失败的原因。

constructor() 
        super();
        this.pricingParameterService = new PricingParameterService();
        this.onEdit = this.onEdit.bind(this);

        // bind here like this below
        this.actionTemplate  = this.actionTemplate.bind(this)
        ....
    

【讨论】：

感谢您在绑定 actionTemplate 后指出它有效 :-)