将道具从子组件传递到主组件(React Native)
将道具从子组件传递到主组件(React Native)
提问于 2017-08-21 06:45:27
我有两个组件。第一个组件是主组件，它的标题为'Select'/'Unselect‘
export default class Contacts extends React.Component {
constructor(props) {
super(props);
this.state = { check: 0 };
}
oneItem() {
this.setState({ check: this.state.check === 0 ? 1 : 0 });
}
render() {
const { check } = this.state;
const infoUserLists = UserList;
const dataUserList = infoUserLists.map((infoUserList, index) => <InfoUserList
key={`infu_${index + 1}`}
infoUserList={infoUserList}
selectAll={this.state.check}
/>);
return (
<View>
<View>
<TouchableOpacity onPress={() => this.oneItem()}>
<NormalText label={check === 0 ? 'Select All' : 'Unselect'} />
</TouchableOpacity>
{dataUserList}
</View>
);
}
}我还有一个子组件，当用户单击"onPush" function - title Select All/Unselect时，应该会发生变化。所以用户点击了"InfoUserList"组件，但是在主"Contacts"组件中这个标题的状态改变了。
export default class InfoUserList extends React.Component {
constructor(props) {
super(props);
this.state = { check: 0, label: 'Select All' };
}
onPush() {
this.setState({ check: this.state.check === 0 ? 1 : 0 });
}
render (){
const { infoUserList, selectAll } = this.props;
const { check } = this.state;
return (
<View key={infoUserList.name}>
<TouchableOpacity onPress={() => this.onPush()}>
<Image source={ check === 1 || selectAll === 1 ? iconsLnk.choose : iconsLnk.plus } />
</TouchableOpacity>
</View>
);
}
}回答 1
Stack Overflow用户
发布于 2017-08-21 07:05:50
若要将子更改通知父对象，需要将事件处理程序从父对象传递给子对象，然后在事件发生时使子对象调用事件处理程序方法。
- 在父级中定义事件处理程序。
onInfoUserListCheckChange() { //在这里做点什么}
注意:您可能需要在父构造函数中绑定事件处理程序this才能访问它。
this.onInfoUserListCheckChange = onInfoUserListCheckChange.bind(this);- 从子事件引发事件。
if (this.props.onCheckChange) { this.props.onCheckChange( //检查的值)；}
}
- 将处理程序从父进程传递给子进程
< InfoUserList onCheck={this.onCheckChange} />
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45790784
复制
相似问题
蜂窝塔位置
从蜂窝塔数据库获取位置
使用wifi或蜂窝塔信号获取位置更新。
使用蜂窝塔的Android定位
获取手机塔位置- Android
腾讯云开发者
