使用Material-ui複選框與reactjs和redux

Question

我想顯示選中的複選框項目。對於哪個Im使用material-ui checkbox，所以現在我只能夠使用複選框顯示項目，但無法顯示所選項目。我知道這很容易，但我是新的反應，因此很難開始。希望得到幫助。謝謝。

this.state = { 
      data: [apple, kiwi, banana, lime, orange, grape], 
     }} 
    handleCheck(x) { 
     this.state.checkedValues.push(x); 
    } 
render(){ 
     {this.state.data.map((x) => 
      <Checkbox 
       label={x} key={x.toString()} 
       onCheck={() => this.handleCheck(x)} 
       checked=true 
       }/> 
     )}} 

Answer 1

在handleCheck函數中，您試圖錯誤地更新組件狀態。您需要使用setState來更改狀態。在你的例子中，狀態沒有得到更新，所以這可能是你沒有看到任何被選中的原因。此外，要幫助清理你的例子有點：

class CheckboxList extends React.Component{ 
    constructor() { 
    super(); 
    this.state = { 
     data: ['apple', 'kiwi', 'banana', 'lime', 'orange', 'grape'], 
     checkedValues: [] 
    } 
    } 
    handleCheck(index) { 
    this.setState({ 
     checkedValues: this.state.checkedValues.concat([index]) 
    }); 
    console.log(this.state.checkedValues.concat([index])) 
    } 
    render(){ 
    const checks = this.state.data.map((item, index) => { 
     return (
     <span key={item}> 
      <input type="checkbox" 
      value={item} 
      onChange={this.handleCheck.bind(this, index)} //Use .bind to pass params to functions 
      checked={this.state.checkedValues.some(selected_index => index === selected_index)} 
      /> 
      <label>{item}</label> 
     </span>) 
    }); 
    return <div>{checks}</div> 
    } 
} 

更新： 新增工作jsfiddle。

Answer 2

在React中，您不應該直接將數據推送到您的狀態。相反，使用setState函數。

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     data: [apple, kiwi, banana, lime, orange, grape], 
     checkedValues: [] 
    } 
    } 
    handleCheck(x) { 
    this.setState(state => ({ 
     checkedValues: state.checkedValues.includes(x) 
     ? state.checkedValues.filter(c => c !== x) 
     : [...state.checkedValues, x] 
    })); 
    } 

    render() { 
    return (<div> 
    { this.state.data.map(x => 
     <Checkbox 
      label={x} key={x.toString()} 
      onCheck={() => this.handleCheck(x)} 
      checked={this.state.checkedValues.includes(x)} 
     /> 
    )}} 
    </div>) 
    } 
}