undefined 不是对象(正在计算 'this.state.starSide')
undefined is not an object (evaluating 'this.state.starSide')
这些是我的代码:
class StarListScrollViewCell extends Component{
static propTypes = {
dateSource : React.PropTypes.array
}
constructor(props){
super(props);
this.state = {
starSide : 20,
}
}
addStar(){
LayoutAnimation.spring();
this.setState({starSide: this.state.starSide + 10});
}
componentWillMount() {
LayoutAnimation.spring();
}
render(){
return(
<View style={{backgroundColor: 'white' , height: 70 , width : Dimensions.get('window').width,flexDirection:'row'}}>
<TouchableOpacity style={{backgroundColor: 'red' ,width:Dimensions.get('window').width/7,justifyContent:'center',alignItems:'center'}}
onPress = {this.addStar()}>
<Image source={require('./star-gray.png')}
style ={{width:this.state.starSide,
height:this.state.starSide,
justifyContent:'center',alignItems:'center'}}>
</Image>
</TouchableOpacity>
</View>
);
}
}
点击button.And时遇到错误我写的是引用https://facebook.github.io/react-native/releases/next/docs/animations.html
您必须将此绑定到 addStar,因为当您从事件处理程序调用时此上下文已更改。
constructor(props){
super(props);
this.state = {
starSide : 20,
}
this.addStar = this.addStar.bind(this);
}
<TouchableOpacity onPress = {this.addStar()}>
同样,上面的行 运行 很好,但它会立即被调用,这可能不是您的目的,所以请改用
<TouchableOpacity onPress = {this.addStar}>
在 JSX 中使用它时,你应该将上下文绑定到你的处理程序,当你设置 onPress
prop 时不要调用该方法,只需传递对它的引用:
<TouchableOpacity style={{backgroundColor: 'red' ,width:Dimensions.get('window').width/7,justifyContent:'center',alignItems:'center'}}
onPress = {this.addStar.bind(this)}>
React 处理程序不会自动绑定到它们所在的 element/class。
将onPress = {this.addStar()}>
改为
onPress = {this.addStar.bind(this)}>
您可以使用箭头函数代替绑定:
addStar = () => {
LayoutAnimation.spring();
this.setState({starSide: this.state.starSide + 10});
}
然后:
<TouchableOpacity onPress={this.addStar}>
这些是我的代码:
class StarListScrollViewCell extends Component{
static propTypes = {
dateSource : React.PropTypes.array
}
constructor(props){
super(props);
this.state = {
starSide : 20,
}
}
addStar(){
LayoutAnimation.spring();
this.setState({starSide: this.state.starSide + 10});
}
componentWillMount() {
LayoutAnimation.spring();
}
render(){
return(
<View style={{backgroundColor: 'white' , height: 70 , width : Dimensions.get('window').width,flexDirection:'row'}}>
<TouchableOpacity style={{backgroundColor: 'red' ,width:Dimensions.get('window').width/7,justifyContent:'center',alignItems:'center'}}
onPress = {this.addStar()}>
<Image source={require('./star-gray.png')}
style ={{width:this.state.starSide,
height:this.state.starSide,
justifyContent:'center',alignItems:'center'}}>
</Image>
</TouchableOpacity>
</View>
);
}
}
点击button.And时遇到错误我写的是引用https://facebook.github.io/react-native/releases/next/docs/animations.html
您必须将此绑定到 addStar,因为当您从事件处理程序调用时此上下文已更改。
constructor(props){
super(props);
this.state = {
starSide : 20,
}
this.addStar = this.addStar.bind(this);
}
<TouchableOpacity onPress = {this.addStar()}>
同样,上面的行 运行 很好,但它会立即被调用,这可能不是您的目的,所以请改用
<TouchableOpacity onPress = {this.addStar}>
在 JSX 中使用它时,你应该将上下文绑定到你的处理程序,当你设置 onPress
prop 时不要调用该方法,只需传递对它的引用:
<TouchableOpacity style={{backgroundColor: 'red' ,width:Dimensions.get('window').width/7,justifyContent:'center',alignItems:'center'}}
onPress = {this.addStar.bind(this)}>
React 处理程序不会自动绑定到它们所在的 element/class。
将onPress = {this.addStar()}>
改为
onPress = {this.addStar.bind(this)}>
您可以使用箭头函数代替绑定:
addStar = () => {
LayoutAnimation.spring();
this.setState({starSide: this.state.starSide + 10});
}
然后:
<TouchableOpacity onPress={this.addStar}>