表格列中的按钮不等待 onClick 事件 [重复]

Question

我有一个表格，其中最后一列应该用作“删除项目”按钮。表格看起来像这样：

const columns = ({ onClick }) => [
  {
    key: 'type',
    onRender: (item) => (
      <p className="ms-font-m mb-0">
        {item.type}
      </p>
    ),
  },
  {
    key: 'remove',
    onRender: (item) => (
      <PrimaryButton onClick={onClick(item.type)}>
        <FormattedMessage {...messages.removeLight}/>
      </PrimaryButton>
    ),

  },
]

const Table = ({ data, onClick, intl}) => (
  <Table
    items={data}
    compact
    columns={columns({ onClick })}
  />
);

，其中 onClick 事件调用重写当前状态并设置新状态的函数，如下所示：

handleRemove = (type) => {
    const { form } = this.state

    var itemsNew = form.items.filter(e => e.type !== type),

    this.setState({
      form: itemsNew,
    });
  }

问题是，当表格被渲染时，handleRemove 函数会立即被调用并且不会等待点击事件。但是，如果我删除 item.type 参数并将 handleRemove 作为空函数调用，并且仅包含一些 console.log(...) 行，它就可以正常工作。

我对 JS 很陌生，真的不明白我在这里缺少什么。

Answer 1

只需更改此行 <PrimaryButton onClick={onClick(item.type)}> 给<PrimaryButton onClick={() => onClick(item.type)}>

另一种解决方案是将函数“形状”从这个handleRemove = (type) => {...} 更改为这个handleRemove = (type) => () => {...}