ReactJS MaterialUI複選框 - onCheck中的設置狀態（）

使用material-ui 0.15.3和react 15.3.0。ReactJS MaterialUI複選框 - onCheck中的設置狀態（）

我有一個複選框組件，並希望在其onCheck函數中使用this.setState。

很明顯，我不得不手動將某些東西傳入複選框的checked支柱。如果我不這樣做，那麼我不能使用setState。如果我嘗試這樣做，那麼複選框的可視組件將不會更新。例如。我點擊複選框並保持空白。 我的第一個問題是爲什麼？爲什麼我不能把它作爲一個不受控制的組件？爲什麼我必須通過checked道具？

<Checkbox 
    label="1" 
    style={styles.checkbox} 
    onCheck={this.handleCheck.bind(this)} 
    checked={this.state.box1} // if this is not supplied then I cannot use setState within handleCheck()

handleCheck（）：

handleCheck(event, checked) { 
    this.setState({ 
     box1: checked 
     someState: someValue 
    }); 
}

現在我已經多個複選框，所以我的第二個問題是，我怎麼能結構此所以它是儘可能乾淨？我需要爲每個checkbox（）函數分別設置一個單獨的狀態變量嗎？我覺得這很快就會變得麻煩。例如（狀態爲box1，box2，box3等）

來源

2016-08-03 Rolodecks

我需要爲每個複選框分別設置一個狀態變量嗎？

是的，但它並不需要繁瑣。它可以是與特定複選框相對應的ID數組。

我需要單獨的handleCheck（）函數嗎？

當然不是，單個函數會做。只需傳遞id即可。

這裏有一個例子想象你有一個可變數目複選框：

handleCheck(id) { 
    let found = this.state.activeCheckboxes.includes(id) 
    if (found) { 
    this.setState({ 
     activeCheckboxes: this.state.activeCheckboxes.filter(x => x !== id) 
    }) 
    } else { 
    this.setState({ 
     activeCheckboxes: [ ...this.state.activeCheckboxes, id ] 
    }) 
    } 
} 

render() { 
    return (
    <div> 
     {this.state.aBunchOfCheckboxes.map(checkbox => 
     <Checkbox 
      label={checkbox.label} 
      onCheck={() => this.handleCheck(checkbox.id)} 
      checked={this.state.activeCheckboxes.includes(id)} 
     /> 
     } 
    </div> 
) 
}

來源

2016-08-03 19:15:27 azium

感謝您的回答。所以有一個狀態數組表示哪些複選框處於活動狀態？ 'this.state.aBunchOfCheckboxes'應該代表什麼？ – Rolodecks

這只是爲了說明這將如何與任何數量的複選框工作。你不需要這項工作。 – azium

謝謝一堆。我怎麼去附加一個ID /標籤複選框，但？你能告訴我一個例子嗎？ – Rolodecks

我的第一個問題是爲什麼呢？爲什麼我不能把它作爲一個不受控制的組件？爲什麼我必須將某些東西傳遞給檢查的道具？

複選框需要checked屬性來決定複選框是選中還是取消選中。當checked收到true時，該複選框顯示爲已選中，當收到false時，該複選框保持未選中狀態。如果你不傳遞一個值，應該怎麼知道是否顯示一個複選框或一個未選中的複選框？

來源

2017-04-19 12:14:02

ReactJS MaterialUI複選框 - onCheck中的設置狀態（）

回答

相關問題