添加动态键设置状态，反应

Question

我有这个状态，

this.state = {
   dropdown1: false,
   dropdown2: false,
   dropdown3: false
}

我想使用 this.setState 访问这些状态下的下拉列表，但“dropdown”后面的数字来自 API，

onMaca = (ev) => {
   this.setState({
       dropdown + ev: true
    })
}

所以我希望密钥是动态的“dropdown1”。

感谢您的回答

Answer 1

您可以像这样访问对象属性 object['property name']

onMaca = (ev) => {
this.state['dropdown' + ev]= true;
   this.setState({
       ...this.state
    })
}

Answer 2

https://codezup.com/add-dynamic-key -to-object-property-in-javascript/

您可以使用其中任何一个来动态设置密钥。我将尝试用 setState 的示例来更新答案。

Answer 3

状态是一个 JS 对象，因此您可以像平常一样获取它的键，如下所示：

const stateKeys = this.state.keys()

现在您有一个数组： [ "dropdown1", "dropdown1", "dropdown1" ]
使用它的一种方法是：

const keysMap = statekeys.map(( item, i ) => return { 
  key: item,  
  idx: i,  
  number: item.replace( /dropdown/, '' )  
}  

keysMap 看起来像这样： [ { key: 'dropdown1', idx: 0, number "1" }, { key: 'dropdown1', idx: 1, number "2" }, { key: 'dropdown1', idx: 2, number "3" } ]
您可以查询 keysMap 以获得给定的 dropDownNumber，如下所示：

let k = keysMap.find( kmap => kmap.key = dropDownNumber )  

要设置下拉列表的状态：

this.setState({ k: <whatever> })