React-native 点击子组件tab项 向父组件传status值,进而重新获得当前点击的status渲染该激活显示的子tab项
父组件:
class Father extends Component {
constructor(props) {
super(props);
this.state = {
status: 0
};
}
_callback(statusId) {
{/*
this.setState({
status: statusId,
});
*/}
alert("父组件接收到的值为: " + statusId); *//这里能获取到子组件点击的status值,但一旦上面父组件加上this.setState便会报错,提示undefined is not function (evaluating 'this.this.setState({
status: statusId,
});')*
}
render() {
return (
<Child status={this.state.status} callback={this._callback} />
)
}
}
子组件:
class Child extends Component {
constructor(props) {
super(props);
this.state = {
status: this.props.status,
};
}
_press(statusId) {
this.props.callback(statusId);
}
render() {
return (
//省略代码
<TouchableHighlight
onPress={this._press(this, 1)}
>
<View>
<View style={[styles.tab]}></View>
<Text style={[styles.text]}>状态1</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={this._press(this, 2)}
>
<View>
<View style={[styles.tab]}></View>
<Text style={[styles.text]}>状态2</Text>
</View>
</TouchableHighlight>
//省略代码
)
}
}
上下文this
不对了,改改:
父组件:
class Father extends Component {
constructor(props) {
super(props);
this.state = {
status: 0
};
}
_callback(statusId) {
this.setState({
status: statusId,
});
}
render() {
return (<Child status={this.state.status} callback={this._callback.bind(this)} />);
}
}
补充:
通过官网文档,你就能看出来。
ES6
类语法格式书写的组件,必须手动bind
上下文,才能获取正确的this