ReactJS - 使用默認狀態呈現

Question

如何從getInitialState()中重新渲染具有狀態的組件？

例如：https://jsbin.com/pajapoyipo/edit?html,output

在示例代碼中，我按一下按鈕，組件按鈕來調整狀態，按鈕是黃色的 - 它的工作，但是當我點擊另一個按鈕，我想點擊的按鈕是黃色（它的工作），舊按鈕將狀態和顏色更改爲紅色（它不起作用）。

Answer 1

避免這樣的東西：

childState.setState({klasa: "yellow"}); 

你不應該從父設置子狀態。狀態是一個組件的內部，它只應該被自己改變。相反，父母可以用不同的道具重新呈現孩子。

如果你只想要一個按鈕被激活，那麼你必須有一些狀態只允許一個活動按鈕。由於孩子不可能知道他們的兄弟姐妹，這段國家必須居住在父母身上。我叫它activeBtn。如果activeBtn是1，那麼第一個按鈕會顯示爲黃色。父項中的這段狀態對應於子項中的布爾屬性active。我還在父級定義了一個單擊處理程序來更改狀態。這個點擊處理程序作爲道具傳遞給每個孩子。

如果這沒有意義，修改後的代碼應該作爲一個更好的解釋： https://jsbin.com/filasisemu/1/edit?html,output