Question

我正在使用反应表（https://github.com/react-tools/react-table）来绘制费用表。在一栏中，应该有一个按钮来“批准”费用。这样处理：

const columns = [
  {
    Header: "Description",
    accessor: "description"
  },
  {
    Header: "Approve",
    accessor: d => {
      return <button onClick={this.approveExpense(d.id)}>Approve</button>;
    },
    id: "approved"
  }
];

其中approveExpense函数定义为：

  approveExpense = id => {
    fetch(`${apiRoot}expenses_pending/`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Token ${this.props.auth.token}`
      },
      body: JSON.stringify({
        id: id
      })
    }).then(res => {
      if (res.status === 200) {
        this.setState({
          issues: this.state.expenses.filter(expense => expense.id != id)
        });
      } else {
        console.log("Error");
      }
    });
  };

但是，奇怪的是，当页面加载时，它的行为就像每秒多次重复按下所有这些按钮一样（直到风扇开始发疯并且我停止了反应服务器）。

我在做蠢事吗？

全班制：

class ExpensePendingAdmin extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    fetch(`${apiRoot}expenses_pending`, {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Token ${this.props.auth.token}`
      }
    })
      .then(response => response.json())
      .then(data => {
        console.log(data);
        this.setState({
          expenses: data
        });
      });
  }

  approveExpense = id => {
    fetch(`${apiRoot}expenses_pending/`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Token ${this.props.auth.token}`
      },
      body: JSON.stringify({
        id: id
      })
    }).then(res => {
      if (res.status === 200) {
        this.setState({
          issues: this.state.expenses.filter(expense => expense.id != id)
        });
      } else {
        console.log("Error");
      }
    });
  };

  render() {
    const columns = [
      {
        Header: "Description",
        accessor: "description"
      },
      {
        Header: "Logged At",
        id: "loggedAt",
        accessor: d =>
          moment(d.expense_incur_datetime).format("HH:mm - ddd d/M/YYYY")
      },
      {
        Header: "Amount",
        accessor: d => `£${d.amount}`,
        id: "amount"
      },
      {
        Header: "Approve",
        accessor: d => {
          return <button onClick={this.approveExpense(d.id)}>Approve</button>;
        },
        id: "approved"
      },
      {
        Header: "Paid",
        accessor: d => {
          console.log(d);
          return d.is_unpaid ? "No" : "Yes";
        },
        id: "paid"
      }
    ];

    return (
      <div className="container-fluid">
        {this.state.expenses ? (
          <>
            <div className="row">
              <div className="col text-center">
                <h2>Pending Expenses</h2>
              </div>
            </div>
            <div className="row">
              <div className="col">
                <ReactTable
                  data={this.state.expenses}
                  columns={columns}
                  minRows="0"
                  minWidth="50"
                  showPagination={false}
                />
              </div>
            </div>
          </>
        ) : (
          "LOADING"
        )}
      </div>
    );
  }
}

Answer 1

JSX中事件处理程序中的方法不需要括号，如果要传递参数，只需将其包装在函数中即可

onClick={() => this.approveExpense(d.id)}

Answer 2

所有其他答案都是正确的，但是您也可以通过使函数具有多个参数集来改善函数调用的语法：

approveExpense = id => ev => {

然后像这样设置访问器渲染：

accessor: d => <button onClick={this.approveExpense(d.id)}>Approve</button>;

函数this.approveExpense(d.id)将返回另一个能够接收其他参数的函数（此处为单击事件名称ev），并且会像超级按钮一样工作

Answer 3

您需要像回调函数一样传递approveExpense（）函数，因此它仅在您单击时触发。

<button onClick={(d) => this.approveExpense(d.id)}>Approve</button>

Answer 4

代码的问题是您以错误的方式传递了事件处理程序：

  return <button onClick={this.approveExpense(d.id)}>Approve</button>;

通过直接在JSX代码中使用this.approveExpense（d.id），您告诉javascript一旦解释程序读取该函数，便执行该函数。相反，您应该在点击时代理函数执行，如下所示：

  return <button onClick={(e) => {this.approveExpense(d.id)}}>Approve</button>;

有关如何在React中将函数传递给组件的更多深入说明，您可以检查https://reactjs.org/docs/faq-functions.html

React反复运行功能，但是我还没有调用它

4 个答案: