编辑:这是副本,看这里

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

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

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


当前回答

在.map的循环中工作如下:

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

注意type参数中的[]。 希望这对你有所帮助。

其他回答

可以使用扩展语法,像这样:

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

在.map的循环中工作如下:

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

注意type参数中的[]。 希望这对你有所帮助。

我也遇到过类似的问题。

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

例如this.setState[烫({权限。代码:e.target.checked})

然而,这不是有效的语法。

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

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

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

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

在ES6+中,你只需要执行[${variable}]