reactjs - 将值从灯箱传递给父级

Question

我正在我的应用程序中为用户创建个人资料屏幕。我正在使用 wix 的 React-Native-Navigation 中的灯箱来执行编辑配置文件。因此，用户将单击 touchableopacity，将弹出一个灯箱，用户将输入新信息并保存。所以，我想知道是否可以将文本输入值从 lightbox 传递到父级(profile.js)，以便我可以在 profile.js 中设置状态？

Answer 1

是的，这是可能的。您需要将数据作为 props 发送给父级。如果您以前没有这样做过，可能会感觉有点棘手，但您会成功的。

来自父级:

<LightboxComponent 
  userData={this.handleUserData(data)}
/>

handleUserData(data) {
  /* Do something with the data here */
}

来自 child :

要发送数据，您需要在要捕获的输入上设置 onChange 事件或类似事件，如下所示:

<input name="user-name" onChange={ (e) => this.props.userData(e.target.value) }

这将使子级的输入数据发送到父级。每个更改都会触发受影响组件的重新渲染。

如果您的应用提示无法正确设置 State，那么您需要在父构造函数中绑定(bind) this，如下所示:

this.handleUserData = this.handleUserData.bind(this);