設置和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 
 
     }]} 
 
    ]} 
 
    }