Reputation:
Goal: Create a reusable OptionFan component that allows children as ChildButton components. Issue: unable to access ChildButton's method "flyOut()" inside OptionFan(parent) component method "showOptions()"
in Option Fan component:
showOptions = () => {
let animations = this.props.children.map((child, i) => {
this.refs.child.flyOut();
});
Animated.stagger(this.props.staggerDelay, animations).start();
}
renderOptions = () => {
return this.props.children.map((child, i) => {
return <ChildButton ref={child} siblings={this.props.children.length} key={i} icon={} number={i} size={} />
})
}
in ChildButton component:
componentDidMount() {
this.props.ref(this);
}
flyOut = () => {
const {number, size} = this.state;
let offset = this.findChildCoordinates(number);
Animated.timing(
this.state.move,
{toValue: offset}
).start();
}
the desired method is unaccessible in code-suggestions, what is incorrect in my approach?
Upvotes: 0
Views: 3080
Reputation: 5496
You need bind them to your class. Change your optionFan
Component like this:
Option Fan:
showOptions = () => {
let animations = this.props.children.map((child, i) => {
this.child.flyOut();
});
Animated.stagger(this.props.staggerDelay, animations).start();
}
renderOptions = () => {
return this.props.children.map(i => {
return <ChildButton ref={ Ref =>(this.child = Ref)} siblings={this.props.children.length} key={i} icon={} number={i} size={} />
})
}
For more reference see this https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542
Upvotes: 1