Meteor / React - Material UI 组件芯片无法识别 onRequestDelete 函数

Question

我在我的应用程序中使用 Material UI 的芯片元件，并根据文档

onRequestDelete - Callback function fired when the delete icon is clicked. If set, the delete icon will be shown.

import React from 'react'
import { createContainer } from 'meteor/react-meteor-data'
import Chip from 'material-ui/Chip'

class InfluencerChips extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      currentInfluencers: [{name: {first: 'Test', last: 'User'}, relationship: 'Friend'}]
    }

    this.handleDelete = this.handleDelete.bind(this)
  }

  handleDelete(id){
    console.log(id)
  }

  render() {
    return(
      <div>
        { this.state.currentInfluencers.map((influencer, k) =>
          <Chip
            key={k}
            onRequestDelete={this.handleDelete(influencer.id)}
          >
            {influencer.name.first}
          </Chip>
        )}

      </div>
    )
  }
}

我似乎无法将 'handleDelete' 函数识别为函数。它呈现这个：

但是当我将行更改为：

onRequestDelete={function(){}}

它可以像这样使用关闭图标正确呈现

那么handleDelete(id)实际上是一个函数吗？ React 的处理方式是什么？提前致谢

Answer 1

因为

this.handleDelete(influencer.id) 不是函数，它是一个 return 值，由函数 return 编辑 this.handleDelete 是一个函数，但您需要的是值，而不是事件

改成这样：

onRequestDelete={() => this.handleDelete(influencer.id)}

Meteor / React - Material UI 组件芯片无法识别 onRequestDelete 函数

Meteor / React - Material UI component Chip not recognizing onRequestDelete function

javascript

meteor

reactjs

material-ui