Question

我有一个带有注入Mobx存储的组件，它具有以下方法：

constructor(props) {
  super(props)

  this.state = {
    propertyChangeNotifications: true,
    smsNotifications: false
  }
}

updateNotifications = (type, value) => {
  this.props.uiStore.updateProfile(type, value)
}

我将此方法作为支持传递给子组件：

<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，undefined进行调用。

我做错了什么？

Answer 1

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

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

Answer 2

问题是，在所有地方，您for_each(s.begin(), s.end(), [=](Object& a){ a.setId(new_id); });方法两次，一次使用

binding

一个通过：

this.updateNotifications={() => this.updateNotifications()} //here you are calling the function with no parameter.

只需从所有地方删除第一条路，就可以了。

只需使用：

updateNotifications = () =>

并使用this.updateNotifications={this.updateNotifications}：

定义该功能

arrow function

ReactJS onClick参数未传递给父组件

2 个答案: