将值从灯箱传递到父级

时间:2018-06-01 09:23:11

标签: reactjs react-native react-native-navigation wix-react-native-navigation

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

2 个答案:

答案 0 :(得分:1)

是的,这是可能的。您需要将数据作为道具发送给父级。如果你之前没有这样做可能会感觉有点棘手,但你会到达那里。

来自父母:

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

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

来自孩子:

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

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

这将使来自子节点的输入数据被发送到父节点。每次更改都会触发重新呈现受影响的组件。

如果你的应用抱怨无法正确设置状态,那么你需要在父类构造函数中绑定 this ,如下所示:

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

答案 1 :(得分:0)

我还会说将父对象的函数指针作为道具传递给孩子(如React网站上所示)。虽然有些人选择使用事件发射器。我真的很好奇更多的开发者和#39;对此的意见。

是否会使StackOverflow上的线程脱轨以进行史诗般的投票?