reactjs - 无法使 onClick 在 ReactJS 中工作

Question

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

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

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() 内，它就可以工作。但由于这是为每一行生成的动态按钮，并且代码在外部，因此似乎无法正常工作。不知道如何处理。

Answer 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)
        ....
    }