编辑:这是副本,看这里

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

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

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


当前回答

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

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

    this.setState( stateObject );    
},

如果使用ES6或Babel transpiler转换你的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 });
}

其他回答

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

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

希望这能有所帮助

我只是想补充一点,你也可以使用解构来重构代码,让它看起来更整洁。

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

请注意引号。

当给定元素为对象时:

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

希望它能帮助到别人

请试试这个。

这里以国家为例

 this.state = {
            name: '',
            surname: '',
            username: '',
            email: '',
  }

Onchange函数在这里。

onChangeData = (type, event) => {
    const stateData = this.state;
    if (event === "" || event === "Seçiniz")
        stateData[type] = undefined
    else
        stateData[type] = event

    this.setState({ stateData});
}