设置和React.js

Question

复位状态，我试图建立在我的网页中的部分，在那里有一个2X2的网格显示四个部分组成。当您单击其中一个时，该框将展开到屏幕的中心，而其他人则淡出。通过在几个不同的属性上调用setState来切换css类，我已经明白了这一点。

什么我在与当一个“关闭”按钮被踢以致复位状态麻烦的箱子承担其原有的形状和透明度。我从“handleCloseClick”功能中看到的console.log，所以我知道这是有线的财产。不管如何我遍历状态的阵列，我不能改变它们的属性回到原来的状态。这是我的代码。

class Parent extends Component{ 
    constructor(){ 
    super(); 
    this.state = 
     attrs: {[{ 
     id: 1, 
     expand: false, 
     reduced: false, 
     seeText: false 
    }], 
    [{ 
     id: 2, 
     expand: false, 
     reduced: false, 
     seeText: false 
    }], 
    [{ 
     id: 3, 
     expand: false, 
     reduced: false, 
     seeText: false 
    }], 
    [{ 
     id: 4 
     expand: false, 
     reduced: false, 
     seeText: false 
    }]} 
    this.handleClick = this.handleClick.bind(this) 
    this.handleCloseClick = this.handleClick.bind(this) 
    } 
    /*This function works*/ 
    handleClick(e){ 
    const array = this.state.attrs 
    array.map(function(element){ 
     if(element.id === i){ 
     element.reduced = false; 
     element.expand = true; 
     element.seeText = true; 
     }else{ 
     element.reduced = true; 
     } 
    }) 
    this.seState({attrs: array}) 
    } 
    /*This function will console.log but will not setState of attrs*/ 
    handleCloseClick(){ 
    const newArray = this.state.attrs 
    newArray.map(function(element(){ 
     element.expand = false; 
     element.reduced = false; 
     element.seeText = false; 
    }) 
    this.setState(attrs: newArray}) 
    } 
    render(){ 
    const newEls = this.state.attrs; 
    return(
     {newEls.map(function(newEl, index)){ 
     return <Child key={index} onClick={this.handleClick(el)} onCloseClick={this.handleCloseClick()} /> 
     } 
    ) 
    } 
} 

请帮帮忙！为什么这个该死的状态不会变回来？！？！

Answer 1

有几个问题... .map返回一个新的数组，不改变现有的状态。所以你需要将它分配给一个变量来查看变化。

此外，您必须返回.map中的值，或使用"implicit" return({与{。

handleCloseClick(){ 
 
    const newArray = this.state.attrs.map(element => ({ 
 
    element.expand = false; 
 
    element.reduced = false; 
 
    element.seeText = false; 
 
    })) 
 
    this.setState(attrs: newArray}) 
 
}

您还可以将初始状态到它自己的方法，然后在构造函数中使用，当你想要重置它...

constructor() { 
 
    ... 
 
    this.state = this.initialState(); 
 
    } 
 
    
 
    close() { 
 
    this.setState(this.initialState()); 
 
    } 
 
    
 
    initialState() { 
 
    return { 
 
     attrs: [ 
 
     [{ 
 
      id: 1, 
 
      expand: false, 
 
      reduced: false, 
 
      seeText: false 
 
     }], 
 
     [{ 
 
      id: 2, 
 
      expand: false, 
 
      reduced: false, 
 
      seeText: false 
 
     }], 
 
     [{ 
 
      id: 3, 
 
      expand: false, 
 
      reduced: false, 
 
      seeText: false 
 
     }], 
 
     [{ 
 
      id: 4 
 
      expand: false, 
 
      reduced: false, 
 
      seeText: false 
 
     }]} 
 
    ]} 
 
    }