javascript - 如何在 Reactjs 中使用变量改变状态

Question

我是 Reactjs 的新手，在试验我的代码时卡住了。我正在使用 math.random 来查找 0-9 之间的值> 并与 valvar 连接以获得多个变量。我想找到相应变量的状态。

这是我的代码。

 getInitialState: function(){
   return{valvar2:"",valvar3:"",valvar4:"",valvar5:"",valvar6:"",valvar7:"",valvar8:"",valvar9:""}
  },
 handleClick: function(){
  var createVar="";
  createVar ="valvar"+Math.floor((Math.random() * 9) + 1);
  if(this.state.createVar==""){
     this.setState({createVar:"HELLO"})
  }

但是这段代码不起作用，我不确定为什么。这只是一个例子，不是我的原始代码。

Answer 1

如果您使用 babel并且不想直接改变你的状态(关于改变状态，see my previous answer here)，最简单的方法是使用 computed property names - 将属性名称包裹在方括号中，如 [variable]:

const n = Math.floor((Math.random() * 3) + 1)
this.setState({
  ['valvar' + n]: 'hello'
})

您可以在此处查看示例:http://codepen.io/CodinCat/pen/YNjJBb?editors=0011