javascript - ReactJS onClick 参数没有传递给父组件

Question

我有一个注入(inject)了 Mobx 存储的组件，该存储具有以下方法:

constructor(props) {
  super(props)

  this.state = {
    propertyChangeNotifications: true,
    smsNotifications: false
  }
}

updateNotifications = (type, value) => {
  this.props.uiStore.updateProfile(type, value)
}

我将此方法作为 prop 传递给子组件:

<ProfileDetails {...this.props.uiStore.profile} updateNotifications={()=> this.updateNotifications()} />

子组件还有一个方法:

constructor(props) {
  super(props)

  // Get profile data from props
  const {
    propertyChangeNotifications,
    smsNotifications,
    person: {
      fiscalId,
      residentialAddress,
      name,
      lastName,
      phoneNumber,
      type,
      email
    }
  } = props

  // Set state according to props
  this.state = {
    name: name,
    lastName: lastName,
    fiscalId: fiscalId,
    residentialAddress: residentialAddress,
    phoneNumber: phoneNumber,
    type: type,
    email: email,
    propertyChangeNotifications: propertyChangeNotifications,
    smsNotifications: smsNotifications
  }
}

handleCheckbox = (type) => {
  this.props.updateNotifications(type, !this.state[type])
  this.setState({
    [type]: !this.state[type]
  })
}

我正在传递给语义 UI 复选框组件:

<Checkbox toggle label="Notify via SMS " checked={smsNotifications} onChange={()=> this.handleCheckbox('smsNotifications')} />

现在发生的事情是使用正确的参数调用 Checkbox 方法 (this.handleCheckbox)。然后 this.props.updateNotifications 方法也使用正确的参数调用，但是父组件 (updateNotifications) 中的函数使用 undefined< 调用，未定义。

我做错了什么？

Answer 1

我认为你应该传递函数本身，而不是“调用函数”。在这里删除 ()。

<ProfileDetails
    {...this.props.uiStore.profile}
    updateNotifications={this.updateNotifications}
/>