代码之家  ›  专栏  ›  技术社区  ›  DNorthrup

ReactJS-动态状态

  •  0
  • DNorthrup  · 技术社区  · 7 年前

    如何动态创建状态,以便根据前端需求分配“打开”/“关闭”?

    例如。 我有一张有行的桌子 Fab 组件。该组件必须设置一个唯一的ID来打开/关闭以处理动画。我不知道我将拥有多少这样的行,因此我无法用预填充状态 active1 , active2 等。

    代码示例(在本例中,我手动传递对象的“active1”、“active2”,但实际上,我觉得这不是真正的方法。

    {Object.keys(characters).map((k, i) => {
    <Fab 
        active= // how do I specify the state of 'this' instance?
        direction="left"
        containerStyle={{}}
        style={{
                  backgroundColor: "#5067FF"
              }}
        position="topRight"
        onPress={() => this.setState({ //how so I specify 'this' instances state? })}>
    ...redacted
    

    我试图添加一个与我的代码类似的示例。假设我5点过去 Users 每个 User 应该有这个寓言。此时,我的状态为空,因此我尝试实现 for each 循环到 componentdidmount 为了填充状态,这是有效的,但是基于我如何管理状态,我有两个问题。

    a)所有的工厂都一直开放。 b)任何工厂都不会开张。

    这是因为我 onPress 没有更新正确的状态。

    我觉得我必须克服这个问题的复杂性,我正在撕毁我的代码以使它工作,所以我想我会来这里问。

    让我知道我可以共享的其他代码。

    2 回复  |  直到 7 年前
        1
  •  1
  •   StackedQ the red crafteryt    7 年前

    实现这一目标的方法是 activeArray 在里面 state , 您可以切换元素的活动性购买推送或移除元素(或仅其 id 或一些独特的财产) 主动辐射 .

    所以应该有一个函数 onPress 像:

    handlePress = (k) => {
        if(this.state.activeArray.indexOf(k) > -1){
            // remove element
            // for example: 
            this.setState(state => ({activeArray: state.activeArray.filter(activeElement => activeElement !== k)}))
        } else {
            // push element
            // for example: 
            this.setState(state => ({activeArray: [...state.activeArray, k]}))
        }
    } 
    

    那么对于 Fab 组件:

    <Fab 
      active={this.state.activeArray.indexOf(k) > -1}
      direction="left"
      containerStyle={{}}
      style={{
              backgroundColor: "#5067FF"
      }}
      position="topRight"
      onPress={() => this.handlePress(k)}>
    

    此行:

     active={this.state.activeArray.indexOf(k) > -1}
    

    表示如果 k 在里面 主动辐射 然后 active true .

        2
  •  1
  •   Jeeva    7 年前

    可以使用JSON括号([])表示法设置动态状态。

    {
       Object.keys(characters).map((k, i) => {
         let dynamicStateName = "active"+i //it will set the dynamicStateName as active with index. ie, active1, active2 and so on
         return(
           { this.state[dynamicStateName] !== false || this.state[dynamicStateName] !== undefined  ? 
    
           (<Fab 
             active= {dynamicStateName}// specify the state of 'this' instance here as dynamicStateName
             direction="left"
             containerStyle={{}}
             style={{
                  backgroundColor: "#5067FF"
             }}
             position="topRight"
             onPress={() => {(this.state[dynamicStateName] != undefined) ? (this.state[dynamicStateName] ? this.setState({ [dynamicStateName]: false }) : this.setState({ [dynamicStateName]: true })) : this.setState({ [dynamicStateName]: true })}  } />  // it will set the state as true if undefined. It will act as toggleable
             ):
             ( <button onPress={() => this.setState({ [dynamicStateName]: true })}>OpenFabButton<button>
               // initially the dynamicState will be either undefined or false. At that time the button will be show. On clicking the button it will enable the fab component
             )
         )
      })
    }
    

    这会治好你的