[英]Set dynamic state name based on the delivered parameter in react-native
I'm new to developing in react-native. 我是本机开发的新手。 Right now I'm trying to code a simple Scoreboard for the Dart game "Cricket" to get my feet wet.
现在,我正在尝试为Dart游戏“ C”编写一个简单的记分板,以弄湿自己。
It is basically a game where you need to hit the 15-20 and bullseye fields 3 times to close them. 基本上,这是一款您需要击中15-20和靶心场3次才能关闭它们的游戏。 If you hit them more than 3 times you can collect points.
如果您击中它们3次以上,则可以收集积分。
My first version of the app is working but its ugly and uses lots lines of code. 我的第一个应用程序版本正在运行,但是很丑陋,并使用了很多代码行。 I made a function for every point field (15-20 + bullseye) to add the points.
我为每个点字段(15-20 +靶心)创建了一个函数以添加点。 Like:
喜欢:
tap20(){
this.state.indicator = "x";
if(this.state.tapped_20 > 1){
this.state.indicator = "xx";
if(this.state.tapped_20 > 2){
this.state.indicator = "xxx";
if(this.state.tapped_20 > 3){
this.state.points = 20 + this.state.points
}
}
}
this.setState({
points: this.state.points,
tapped_20: this.state.tapped_20+1,
})
}
tap19(){
this.state.indicator_19 = "x";
if(this.state.tapped_19 > 1){
this.state.indicator_19 = "xx";
if(this.state.tapped_19 > 2){
this.state.indicator_19 = "xxx";
if(this.state.tapped_19 > 3){
console.log("Ab hier Punkte..")
this.state.points = 19 + this.state.points
}
}
}
this.setState({
points: this.state.points,
tapped_19: this.state.tapped_19+1,
})
}
Etc.. My approach was now to overgive an parameter with the function. 等等。我现在的方法是使用函数来代替参数。 So i just have one function which adds the points based on the given parameter.
所以我只有一个功能,可以根据给定的参数添加点。 Like so:
像这样:
<TouchableHighlight style={styles.button}
onPress={this.testfunc.bind(this, 20)}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}> 20 Test</Text>
</TouchableHighlight>
Which calls the the function: 哪个调用函数:
testfunc(i) {
window['this.state.indicator_' + i ] = 'test'
console.log(this.state.indicator_20)
...
When i debug it in the Browser it states that the console.log(this.state.indicator_20) is undefined. 当我在浏览器中调试它时,它指出console.log(this.state.indicator_20)是未定义的。
It seems it does not work with this.state... Does anyone know how to solve such a problem? 似乎在this.state中不起作用...有人知道如何解决此类问题吗?
First, you should never have to refer to window
in React Native. 首先,您永远不必在React Native中引用
window
。 Consider that a red flag. 考虑一个红旗。
Second, you cannot evaluate the properties on objects in this fashion: window['this.state.indicator_' + i ]
. 其次,您不能以这种方式评估对象的属性:
window['this.state.indicator_' + i ]
。 You refer to a property called "foo" on an object called "bar" thusly: bar['foo']
and you cannot reference any deeper (that is, no bar['foo.baz']
). 因此,您在名为“ bar”的对象上引用了名为“ foo”的属性:
bar['foo']
并且您无法引用任何更深的内容(即,没有bar['foo.baz']
)。
Anyway, react provides setState
for this: 无论如何,react为此提供了
setState
:
testfunc(i) {
const update = {};
update['indicator_' + i] = 'test';
this.setState(update);
}
Then refer to this.state.indicator_X
in your render, and it'll update as expected. 然后在渲染中引用
this.state.indicator_X
,它将按预期更新。
解决方案是: this.state['tapped_' + i]
this.state['tapped_${i}']
this.state['tapped_' + i]
或this.state['tapped_${i}']
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.