编辑:这是副本,看这里

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

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

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


当前回答

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

请注意引号。

其他回答

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

例如:

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

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

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

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

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

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

解决方案如下

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

这里更新键“page”的值为5

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

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

希望这能有所帮助