300

编辑：这是重复的，请参见此处

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

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

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

4

12 回答 12

311

Thanks to @Cory's hint, i used this:

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

    this.setState( stateObject );    
},

If using ES6 or the Babel transpiler to transform your JSX code, you can accomplish this with computed property names, too:

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 });
}
于 2015-03-26T14:47:41.210 回答
172

当需要处理多个受控输入元素时，可以给每个元素添加一个name属性，让handler函数根据event.target.name的值来选择要做什么。

例如：

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

于 2017-09-14T02:03:53.937 回答
48

我是如何做到这一点的...

inputChangeHandler: function(event) {
  var key = event.target.id
  var val = event.target.value
  var obj  = {}
  obj[key] = val
  this.setState(obj)
},
于 2016-07-25T08:18:17.673 回答
30

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

inputChangeHandler: function ({ target: { id, value }) {
    this.setState({ [id]: value });
},
于 2018-05-06T17:04:46.520 回答
12

我有一个类似的问题。

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

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

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

我使用以下代码来实现这一点：

this.setState({
  permissions: {
    ...this.state.permissions,
    [perm.code]: e.target.checked
  }
});
于 2019-10-01T14:15:02.930 回答
11 
this.setState({ [`${event.target.id}`]: event.target.value}, () => {
      console.log("State updated: ", JSON.stringify(this.state[event.target.id]));
    });

Please mind the quote character.

于 2020-02-07T17:47:06.480 回答
10

在这样的工作循环中.map：

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

注意[]intype参数。希望这可以帮助 ：）

于 2018-04-15T22:05:18.860 回答
6

我一直在寻找一个漂亮而简单的解决方案，我发现了这个：

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

希望这可以帮助

于 2019-11-06T15:09:58.703 回答
4

使用 ES6+ 你可以做 [ ${variable}]

于 2019-04-19T18:57:44.940 回答
2

当给定元素是对象时：

handleNewObj = e => {
        const data = e[Object.keys(e)[0]];
        this.setState({
            anykeyofyourstate: {
                ...this.state.anykeyofyourstate,
                [Object.keys(e)[0]]: data
            }
        });
    };

希望它可以帮助某人

于 2020-07-25T05:04:15.053 回答
1

您的状态与字典更新一些键而不会丢失其他值 

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

解决方案如下

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

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

于 2020-05-29T08:58:24.233 回答
-3

可以使用扩展语法，如下所示：

inputChangeHandler : function (event) {
    this.setState( { 
        ...this.state,
        [event.target.id]: event.target.value
    } );
},
于 2017-03-14T10:16:27.573 回答