具有动态键名的Reactjs setState()?


248

编辑:这是重复项,请参阅此处

设置状态时,找不到任何使用动态键名的示例。这就是我想做的:

inputChangeHandler : function (event) {
    this.setState( { event.target.id  : event.target.value } );
},

其中event.target.id用作要更新的状态键。在React中这不可能吗?


4
这是有关动态对象键的任何问题的重复。
Cory Danielson

9
var newstate = {}; newstate [event.target.id] = event.target.id; this.setState(newstate);
Cory Danielson

谢谢,我在使用对象方面没有很好的把握。
2015年


@trad我遇到了这个问题,但是,您在初始状态下做了什么?没关系吧?
拉斐尔·奥诺夫雷16/09/29

Answers:


280

感谢@Cory的提示,我使用了这个:

inputChangeHandler : function (event) {
    var stateObject = function() {
      returnObj = {};
      returnObj[this.target.id] = this.target.value;
         return returnObj;
    }.bind(event)();

    this.setState( stateObject );    
},

如果使用ES6或Babel编译器来转换JSX代码,您也可以使用计算出的属性名称来完成此操作:

inputChangeHandler : function (event) {
    this.setState({ [event.target.id]: event.target.value });
    // alternatively using template strings for strings
    // this.setState({ [`key${event.target.id}`]: event.target.value });
}

27
如果您正在使用bablejs来构建代码,则还有一种新的语法。您可以使用computed property names
Cory Danielson

第二种方法在Windows(IE,Chrome)的浏览器中导致语法错误。有人注意到吗?
benjaminz

如何获得陈述?
Muneem Habib

谢谢trad,这就是我想要避免<Radio />实现代码重复的目的。
Adesh M

6
如果使用如下所示的计算属性名称设置状态:this.setState({ [event.target.id]: event.target.value });那么如何使用来访问该状态this.state......
user3574492

142

当需要处理多个受控输入元素时,可以向每个元素添加一个name属性,并让处理函数根据event.target.name的值选择要执行的操作。

例如:

inputChangeHandler(event) {
  this.setState({ [event.target.name]: event.target.value });
}


7
[event.target.name]周围的括号表示什么?为什么需要它们?
user798719

1
与通常的方法相比,像this.setState({userName:e.target.value});这样分别命名每个元素。这将把多个形式的元素作为一个数组处理,而无需设置每个元素
vikram jeet singh '18

1
但是我仍然如何以相同的方式访问该状态?喜欢this.state([event.target.name])吗?
基兰库马尔·达夫达

1
我认为MDN网络文档这篇文章说明了我们为什么需要括号。
凯莉

46

我是如何做到的...

inputChangeHandler: function(event) {
  var key = event.target.id
  var val = event.target.value
  var obj  = {}
  obj[key] = val
  this.setState(obj)
},

我做了类似的事情,但是问题是它仍然没有渲染组件,我跑了柱子来发布(包括:D),在某个地方发现了这一点:this.forceUpdate();最新的React不应如此。以后再看看有什么问题!!
xploreraj

24

我只是想补充一下,您还可以使用解构来重构代码并使它看起来更整洁。

inputChangeHandler: function ({ target: { id, value }) {
    this.setState({ [id]: value });
},

10

与这样的.map工作循环:

{
    dataForm.map(({ id, placeholder, type }) => {
        return <Input
            value={this.state.type}
            onChangeText={(text) => this.setState({ [type]: text })}
            placeholder={placeholder}
            key={id} />
    })
}

注意[]in type参数。希望这可以帮助 :)


10

我有一个类似的问题。

我想设置第二级密钥存储在变量中的状态。

例如 this.setState({permissions[perm.code]: e.target.checked})

但是,这不是有效的语法。

我使用以下代码实现了这一目标:

this.setState({
  permissions: {
    ...this.state.permissions,
    [perm.code]: e.target.checked
  }
});


2

我一直在寻找一个漂亮而简单的解决方案,但发现了这一点:

this.setState({ [`image${i}`]: image })

希望这可以帮助


1
this.setState({ [`${event.target.id}`]: event.target.value}, () => {
      console.log("State updated: ", JSON.stringify(this.state[event.target.id]));
    });

请介意引号字符。


0

您使用字典的状态会更新一些密钥而不会丢失其他值

state = 
{   
    name:"mjpatel"  
    parsedFilter:
    {
      page:2,
      perPage:4,
      totalPages: 50,
    }
}

解决方案如下

 let { parsedFilter } = this.state
 this.setState({
      parsedFilter: {
        ...this.state.parsedFilter,
        page: 5
      }
  });

此处使用值5更新键“页面”的值


-4

可以使用传播语法,如下所示:

inputChangeHandler : function (event) {
    this.setState( { 
        ...this.state,
        [event.target.id]: event.target.value
    } );
},

7
React会为您完成对象合并,这是不好的做法。
罗默(Rohmer)

1
基本上,如果您有一些内部对象,并且想要更改该内部对象的属性,您可以这样做:this.setState({selectedItems:{... selectedItems,[item.id]:true}})
Eran或
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.