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

Answer 2

直接更改状态为bad。

在这种情况下，你可以做的是创建一个对象并用它来调用setState。

var modifyState = {};
modifyState[createVar] = "HELLO";

this.setState(modifyState);

或者使用ES6 enhanced object literal

更好更清洁

this.setState({
  [createVar]: 'HELLO'
});

Answer 3

您的州没有定义createVar，它只是handleClick中的局部变量。所以这个条件：this.state.createVar==""永远不会被满足，因为它是undefined。您必须在初始状态中定义createVar。

如果要将生成的值用作状态对象属性名，请使用：

 handleClick: function(){
    var createVar="";
    createVar ="valvar"+Math.floor((Math.random() * 9) + 1);
    if(this.state[createVar] == ""){
        let newState = {};
        newState[createVar] = "HELLO"
        this.setState(newState)
    }
}

或者如果您使用ES2015：

this.setState({
   [createVar]: "HELLO"
})

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

3 个答案: